// Home page — hero, featured drop, categories, product grid, lookbook, info const { useState: useStateH, useEffect: useEffectH, useMemo: useMemoH } = React; // Spinning vinyl hero kept as an opt-in (Tweaks → Hero style: Vinyl) function HeroVinyl() { return ( ); } const TICKER_ITEMS = [ 'Made in Portugal', 'Worldwide Shipping', 'Volume 02 — Out Now', 'Join Patreon — 5% Off', 'Free EU Shipping over €100', 'Limited Run', 'Made in Portugal', 'Worldwide Shipping', 'Volume 02 — Out Now', 'Join Patreon — 5% Off', 'Free EU Shipping over €100', 'Limited Run', ]; // ── Hero: minimal Studio-Iki style (full-bleed image-slot + thin caption row) ─ function Hero({ onShop }) { return (
window.openEmailPopup?.()} style={{cursor:'none'}}>
{[...TICKER_ITEMS, ...TICKER_ITEMS].map((t, i) => ( {t}· ))}
); } function HeroVinylVersion({ onShop }) { return (
); } // ───────────────────────── drop banner ───────────────────────── function DropBanner({ products, openProduct }) { const drop = products.filter(p => p.featured)[0]; return (
The Drop · 03 / 12

Volume 02 — the capsule

Shipping March 2026

A four-piece capsule that takes its cues from late-night Anjuna sets and the kind of record shop you find by accident on a side street in Lisbon. Considered cuts, weighty cotton, and one warm accent that ties everything together.

Capsule04 pieces
Run size200 units / piece
ManufacturingPorto, Portugal
DesignerIn-house
Catalogue №PVL/02
openProduct(drop)} onMouseEnter={()=>onCursor('hover')} onMouseLeave={()=>onCursor('default')}>
Featured · {drop.collection}
{drop.name}
{drop.type}
{window.fmt ? window.fmt((drop?.printed?.[0] || drop?.embroidered?.[0])?.price || drop.price) : `€${drop.price}`}
); } // ───────────────────────── categories ───────────────────────── function CategoryStrip({ onPick }) { const icons = { tees: 'tee', hoodies: 'hoodie', caps: 'cap5', totes: 'tote', }; return (
{CATEGORIES.map((c, i) => ( onPick(c.id)} onMouseEnter={()=>onCursor('hover')} onMouseLeave={()=>onCursor('default')}>
0{i+1} / 04
{c.name}
{c.count} pieces
 ))}
); } // Extra card entries injected into the collection grid. // Each entry appears immediately after its parent product. // { id, variantType, colorway, shirtColorIdx } const GRID_EXTRA_CARDS = [ { id: 'baggy-tee', variantType: 'printed', colorway: 'Beach', shirtColorIdx: 1 }, { id: 'crop-top', variantType: 'printed', colorway: 'Beach', shirtColorIdx: 1 }, { id: 'pull-over', variantType: 'printed', colorway: 'Beach', shirtColorIdx: 1 }, { id: 'tank-top', variantType: 'embroidered', colorway: 'Beach', shirtColorIdx: 1 }, ]; function resolveExtraCard(p, cfg) { const cwArr = p[cfg.variantType] || []; const cwIdx = cwArr.findIndex(c => c.name === cfg.colorway); if (cwIdx < 0) return null; const scIdx = cfg.shirtColorIdx; if (scIdx >= (cwArr[cwIdx].shirtColors?.length ?? 0)) return null; return { p, initialVariantType: cfg.variantType, initialCwIdx: cwIdx, initialShirtColorIdx: scIdx }; } // ───────────────────────── product grid ───────────────────────── function ProductGrid({ products, openProduct, wish, onWish, filter, setFilter, sort, setSort }) { const filtered = useMemoH(() => { let arr = filter === 'all' ? products : products.filter(p => p.category === filter); if (sort === 'price-asc') arr = [...arr].sort((a,b) => a.price - b.price); if (sort === 'price-desc') arr = [...arr].sort((a,b) => b.price - a.price); if (sort === 'alpha') arr = [...arr].sort((a,b) => a.name.localeCompare(b.name)); return arr; }, [products, filter, sort]); const gridCards = useMemoH(() => filtered.flatMap(p => { const extras = GRID_EXTRA_CARDS .filter(cfg => cfg.id === p.id) .map(cfg => resolveExtraCard(p, cfg)) .filter(Boolean); return [{ p }, ...extras]; }), [filtered]); return (
The Catalogue · {gridCards.length} pieces

Shop all

{CATEGORIES.map(c => ( ))}
Sort
{gridCards.map((card, i) => ( ))}
); } // ───────────────────────── lookbook ───────────────────────── function LookbookItem({ shape='wide', label, color='#0a0908', kind='tee' }) { return (
{label}
); } function Lookbook() { return (
Lookbook — 03 / 12

The Closing Set

Photography · Studio 04
); } // ───────────────────────── size guide + faq accordions ───────────────────────── function Accordion({ items, defaultOpen = null }) { const [open, setOpen] = useStateH(defaultOpen); return (
{items.map((it, i) => (
{it.a}
))}
); } function SizeGuideSection() { const [tab, setTab] = useStateH('tee'); const data = SIZES[tab]; return (
Sizing · in centimetres

Size guide

Measurements are taken garment-flat. For a true-to-size fit, pick the row closest to your chest measurement. For a relaxed oversized look — the way these were cut — size up one.

Models are between 5'10"–6'2" and wearing size M / L. If you sit between two sizes, we usually recommend the larger.

{data.map(r => ( ))}
SizeChest (cm)Length (cm)Sleeve (cm)
{r.size} {r.chest} {r.length} {r.sleeve}
); } function FAQSection() { return (
Information

Frequently asked

Email us
({ q: f.q, a:

{f.a}

}))} defaultOpen={0}/>
); } // ───────────────────────── mid-page ticker divider ───────────────────────── function MidTicker() { const items = ['Peripheral', 'Records', 'Volume 02 — Out Now', 'Limited Run', 'Join Patreon — 5% Off', 'Made in Portugal', 'Worldwide Shipping']; const repeated = [...items, ...items, ...items, ...items]; return (
window.openEmailPopup?.()} style={{cursor:'none'}}> {repeated.map((t, i) => ( {t} · ))}
); } // ───────────────────────── product row (best sellers / new in) ───────────────────────── function ProductRow({ id, eyebrow, title, products = [], cards, link, onLink, openProduct, wish, onWish, compact }) { const items = cards || products.map(p => ({ p })); return (
{eyebrow}

{title}

{items.map(({ p, ...extra }) => ( ))}
{link && (
)}
); } // ───────────────────────── about / press strip ───────────────────────── function AboutSection() { return (
Peripheral — studio session
The label

Peripheral is a label for the people who still buy records.

Each Volume is a limited run — designed in-house, printed and finished to order. Heavyweight cottons, brushed-back fleece, garment-dyed colour, made to wear in.

A meaningful share of every order funds the channel — studio time, mastering, and the records we play. When you wear it, you're keeping the platter spinning.

Tune in
onCursor('hover')} onMouseLeave={()=>onCursor('default')}>YouTube onCursor('hover')} onMouseLeave={()=>onCursor('default')}>Instagram onCursor('hover')} onMouseLeave={()=>onCursor('default')}>SoundCloud onCursor('hover')} onMouseLeave={()=>onCursor('default')}>Spotify onCursor('hover')} onMouseLeave={()=>onCursor('default')}>Discord
); } // ────────────────────── collections strip ───────────────────────── function CollectionsSection({ openCollection, products }) { const silhouettes = { tees: 'tee', knits: 'hoodie', cropped: 'tee-crop', bags: 'tote' }; return (

Browse by collection

{COLLECTIONS.map((c, i) => { const firstProduct = (products || []).find(p => c.coverProduct ? p.id === c.coverProduct : p.category === c.cat); const cwArr = (c.coverVariant ? firstProduct?.[c.coverVariant] : null) || firstProduct?.printed || firstProduct?.embroidered || []; const firstCw = (c.coverColorway ? cwArr.find(cw => cw.name === c.coverColorway) : null) || cwArr[0]; const coverImg = firstCw?.shirtColors?.[0]?.images?.[0] || firstCw?.images?.[0] || null; const count = (products || []).filter(p => p.category === c.cat).length; return ( openCollection(c.id)} onMouseEnter={()=>onCursor('hover')} onMouseLeave={()=>onCursor('default')}>
{coverImg ? ( {c.name} ) : ( )}
{count} pieces
{c.name}
{c.sub}
View collection
); })}
); } // ────────────────────── collection page (sub-route) ────────────────────── function CollectionPage({ id, products = [], openProduct, wish, onWish, onBack, openCollection }) { const [sort, setSort] = useStateH('featured'); const isAll = id === 'all'; const collection = isAll ? { id: 'all', name: 'All', sub: 'Everything in the drop' } : COLLECTIONS.find(c => c.id === id) || COLLECTIONS[0]; let filtered = isAll ? products : products.filter(p => p.category === collection.cat); if (sort === 'price-asc') filtered = [...filtered].sort((a,b)=>a.price-b.price); if (sort === 'price-desc') filtered = [...filtered].sort((a,b)=>b.price-a.price); if (sort === 'alpha') filtered = [...filtered].sort((a,b)=>a.name.localeCompare(b.name)); const products_compat = filtered; // rename for JSX below return (
onCursor('hover')} onMouseLeave={()=>onCursor('default')}>Shop / Collections / {collection.name}

{collection.name}

{filtered.length} pieces
{COLLECTIONS.map(c => ( ))}
Sort
{products_compat.flatMap(p => { const extras = GRID_EXTRA_CARDS .filter(cfg => cfg.id === p.id) .map(cfg => resolveExtraCard(p, cfg)) .filter(Boolean); return [ , ...extras.map(card => ( )) ]; })}
); } // ────────────────────── second hero (bottom of page) ────────────────────── function BottomHero() { return (
Peripheral vinyl session
Peripheral — Vinyl Sessions

Hours of melodic house
on vinyl.

onCursor('hover')} onMouseLeave={()=>onCursor('default')} style={{marginTop: 12}}> Listen on YouTube
); } const BEST_SELLER_CONFIG = [ { id: 'baggy-tee', variantType: 'printed', colorway: 'Sky' }, { id: 'crop-top', variantType: 'printed', colorway: 'Rose', initialShirtColorIdx: 1 }, { id: 'tote-bag', variantType: 'printed', colorway: 'Beach' }, { id: 'pull-over', variantType: 'embroidered', colorway: 'Sky' }, ]; // ───────────────────────── home root ───────────────────────── function HomePage({ products = [], loading, openProduct, wish, onWish, openCollection, onShop }) { const bestSellerCards = BEST_SELLER_CONFIG.map(({ id, variantType, colorway, initialShirtColorIdx }) => { const p = products.find(pr => pr.id === id); if (!p) return null; const cwArr = p[variantType] || []; const cwIdx = cwArr.findIndex(cw => cw.name === colorway); return cwIdx >= 0 ? { p, initialVariantType: variantType, initialCwIdx: cwIdx, initialShirtColorIdx } : null; }).filter(Boolean); return (
Best sellers} cards={bestSellerCards} openProduct={openProduct} wish={wish} onWish={onWish} link="Shop all" onLink={() => openCollection('all')} compact/>
); } // ───────────────────────── landing page ───────────────────────── function LandingPage({ navigate }) { return (
Melodic house · On vinyl
Peripheral
Peripheral
Volume 02 — Out Now
navigate({ name:'home' }, '/merch')} onMouseEnter={()=>onCursor('hover')} onMouseLeave={()=>onCursor('default')}> Shop merch onCursor('hover')} onMouseLeave={()=>onCursor('default')}> Watch on YouTube ↗
); } // ───────────────────────── full cart page ───────────────────────── function CartPage({ cart, setCart, navigate, openProduct }) { const subtotal = cart.reduce((s, l) => s + l.price * l.qty, 0); const [confirmingDelete, setConfirmingDelete] = useStateH(null); const handleCheckout = async () => { const itemObjs = cart.map(l => { const vid = l.shirtColor?.variants?.[l.size]; return vid ? { variantId: vid, qty: l.qty } : null; }).filter(Boolean); if (!itemObjs.length) return; const currency = window.shopCurrency || 'USD'; try { const res = await fetch('/api/create-checkout', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ items: itemObjs, currency }), }); if (!res.ok) throw new Error('api error'); const { checkoutUrl, session } = await res.json(); localStorage.setItem('pvl-checkout-session', session); window.location.href = checkoutUrl; } catch { const products = itemObjs.map(i => `${i.variantId}:${i.qty}`).join(','); const session = Date.now().toString(36) + Math.random().toString(36).slice(2); localStorage.setItem('pvl-checkout-session', session); window.location.href = `https://checkout.peripheralvinyl.com/cart/checkout?products=${products}¤cy=${currency}&utm_content=${session}`; } }; const updateQty = (key, delta) => { setCart(prev => prev .map(l => l.key === key ? { ...l, qty: Math.max(0, l.qty + delta) } : l) .filter(l => l.qty > 0) ); }; return (

Your Crate

{cart.length === 0 ? (

Your crate is empty

Browse the collection and find something you love.

) : (
{[...cart].reverse().map(line => { const img = line.shirtColor?.images?.[0] || line.colorway?.images?.[0]; const product = (window.PRODUCTS || []).find(p => p.id === line.id); const goToProduct = () => { if (product && openProduct) openProduct(product); }; return (
{confirmingDelete === line.key && (
setConfirmingDelete(null)}> {line.qty > 1 ? `Remove ${line.qty} items?` : 'Remove item?'}
e.stopPropagation()}>
)}
{line.name}
{line.colorway?.name} · {line.variantType === 'embroidered' ? 'Embroidered' : 'Print'}{line.shirtColor?.name ? ` · ${line.shirtColor.name}` : ''}
Size: {line.size}
e.stopPropagation()}>
{line.qty}
{window.fmt ? window.fmt(line.price * line.qty) : `€${(line.price * line.qty).toFixed(0)}`}
); })}

Order Summary

{[...cart].reverse().map(line => (
{line.name} × {line.qty} {window.fmt ? window.fmt(line.price * line.qty) : `€${(line.price * line.qty).toFixed(0)}`}
))}
Subtotal
Tax & shipping calculated at checkout
{localStorage.getItem('pvl-currency') === 'EUR' && (
Free shipping on EU orders over €100
)}
{window.fmt ? window.fmt(subtotal) : `€${subtotal.toFixed(0)}`}
)}
); } const ExtLink = () => ( ); function OrderCompletePage({ setCart, navigate, friendlyId, orderId, placedAt }) { const { useEffect: useEffectOC, useState: useStateOC } = React; const [copied, setCopied] = useStateOC(false); useEffectOC(() => { setCart([]); }, []); const copyOrderNumber = () => { navigator.clipboard.writeText(friendlyId).then(() => { setCopied(true); setTimeout(() => setCopied(false), 2000); }); }; const formattedDate = placedAt ? (() => { const d = new Date(placedAt); return d.toLocaleString(undefined, { day: 'numeric', month: 'short', year: 'numeric', hour: '2-digit', minute: '2-digit' }); })() : null; return (
Order confirmed

Thank you!

{friendlyId && (

Order No. #{friendlyId}

{formattedDate && (

{formattedDate}

)}
)}

Your order is heading to the team in Portugal. You'll get a confirmation email from Fourthwall shortly with all the details.

Ships in 3–5 business days.

onCursor('hover')} onMouseLeave={() => onCursor('default')} style={{ textAlign: 'center', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 7 }}> Support me on Patreon
onCursor('hover')} onMouseLeave={() => onCursor('default')} style={{ textAlign: 'center', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6, padding: '11px 12px', fontSize: 10 }}> YouTube onCursor('hover')} onMouseLeave={() => onCursor('default')} style={{ textAlign: 'center', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6, padding: '11px 12px', fontSize: 10 }}> Instagram
); } function CheckoutPendingPage({ navigate }) { const { useState: useStateCPP, useEffect: useEffectCPP } = React; const [timedOut, setTimedOut] = useStateCPP(false); const [confirming, setConfirming] = useStateCPP(false); useEffectCPP(() => { const t = setTimeout(() => setTimedOut(true), 6 * 60 * 1000); let hiddenAt = null; const onVisibility = () => { if (document.visibilityState === 'hidden') { hiddenAt = Date.now(); } else if (hiddenAt && (Date.now() - hiddenAt) > 20000) { // Only switch to confirming if they were away for 20+ seconds — long // enough to have realistically completed checkout. setConfirming(true); } }; document.addEventListener('visibilitychange', onVisibility); return () => { clearTimeout(t); document.removeEventListener('visibilitychange', onVisibility); }; }, []); const goBack = () => { window._stopOrderPolling?.(); localStorage.removeItem('pvl-checkout-session'); navigate({ name: 'home' }, '/merch'); }; const spinner = (
); return (
{timedOut ? ( <>
We couldn't confirm your order

Check your email

If you completed checkout, Fourthwall will have sent a confirmation to your inbox.

If you didn't finish, no worries — your crate is still saved. Something go wrong? Get in touch →

) : confirming ? ( <>
Almost there

Confirming your order…

This only takes a moment.

{spinner} ) : ( <>
Checkout in progress

Complete your checkout

Finish your order and your confirmation will appear here automatically.

{spinner} )}
); } Object.assign(window, { HomePage, LandingPage, Hero, ProductRow, CollectionsSection, CollectionPage, AboutSection, BottomHero, ProductGrid, Accordion, SizeGuideSection, FAQSection, CartPage, OrderCompletePage, CheckoutPendingPage });