const { useState, useRef, useEffect, useCallback } = React; const { Reveal, Eyebrow } = window.__QD; const PRESET_SPLITS = [10, 25, 50, 75, 90]; const BeforeSite = () => (
P
PetalCo
{['Home','Shop','About','Blog','Contact'].map(l => {l})}
BUY NOW
โ˜… #1 RATED 2014
Premium Floral
Solutions Online
Discover our cutting-edge floral arrangements that leverage synergy to unlock unprecedented gifting opportunities.
SHOP NOW โ†’
WATCH VIDEO โ–ถ
๐ŸŒธ
shutterstock_4421.jpg
As seen in:
{['VOGUE','ELLE','TIME','FORBES'].map(b =>
{b}
)}
{[{ icon:'๐Ÿš€',t:'Lightning Fast Delivery',d:'Blazing-fast shipping' },{ icon:'๐Ÿ”’',t:'Secure Checkout',d:'Bank-level encryption' },{ icon:'๐Ÿ’ก',t:'Smart Subscriptions',d:'AI-powered weekly' }].map((f,i) => (
{f.icon}
{f.t}
{f.d}
))}
); const AfterSite = () => (
EST. 2014 ยท NO. 04
PETAL&Co
SHOPJOURNALโ˜… NEW
VOLUME III โ€” SPRING ARRANGEMENTS
Flowers,
but make them
arrive on time.
Hand-tied. Sourced within 40 miles. Delivered before noon, or it's free.
Order today โ†’
or visit the studio
Plate I โ€”
SPRING / 26
{[{ n:'01',t:'Pick a bloom',s:'curated weekly' },{ n:'02',t:'Choose a vase',s:'eight shapes' },{ n:'03',t:'Add a note',s:'handwritten' },{ n:'04',t:'Doorstep, 11am',s:"or it's free" }].map((c,i) => (
NO. {c.n}
{c.t}
{c.s}
))}
); const clampSplit = (value) => Math.max(2, Math.min(98, value)); const getPresetValue = (value) => { const match = PRESET_SPLITS.find((preset) => Math.abs(preset - value) < 3); return match ?? null; }; const BeforeAfter = () => { const [activePreset, setActivePreset] = useState(50); const [dragging, setDragging] = useState(false); const [hasInteracted, setHasInteracted] = useState(false); const wrapRef = useRef(null); const introStartedRef = useRef(false); const currentSplitRef = useRef(50); const rafRef = useRef(null); const introFrameRef = useRef(null); const beforeLabelRef = useRef(null); const afterLabelRef = useRef(null); const syncLabels = useCallback((value) => { if (beforeLabelRef.current) beforeLabelRef.current.style.opacity = value > 8 ? '1' : '0'; if (afterLabelRef.current) afterLabelRef.current.style.opacity = value < 92 ? '1' : '0'; }, []); const applySplit = useCallback((value, options = {}) => { const { syncPreset = true } = options; const next = clampSplit(value); currentSplitRef.current = next; if (wrapRef.current) { wrapRef.current.style.setProperty('--split', `${next}%`); } syncLabels(next); if (syncPreset) { setActivePreset((prev) => { const matched = getPresetValue(next); return prev === matched ? prev : matched; }); } }, [syncLabels]); const scheduleSplit = useCallback((value, options = {}) => { if (rafRef.current) cancelAnimationFrame(rafRef.current); rafRef.current = requestAnimationFrame(() => { applySplit(value, options); rafRef.current = null; }); }, [applySplit]); const updateFromClientX = useCallback((clientX) => { if (!wrapRef.current) return; const rect = wrapRef.current.getBoundingClientRect(); const next = ((clientX - rect.left) / rect.width) * 100; scheduleSplit(next); }, [scheduleSplit]); useEffect(() => { applySplit(50, { syncPreset: true }); return () => { if (rafRef.current) cancelAnimationFrame(rafRef.current); if (introFrameRef.current) cancelAnimationFrame(introFrameRef.current); }; }, [applySplit]); useEffect(() => { if (!dragging) return undefined; const onPointerMove = (event) => updateFromClientX(event.clientX); const onPointerUp = () => setDragging(false); window.addEventListener('pointermove', onPointerMove, { passive: true }); window.addEventListener('pointerup', onPointerUp, { passive: true }); return () => { window.removeEventListener('pointermove', onPointerMove); window.removeEventListener('pointerup', onPointerUp); }; }, [dragging, updateFromClientX]); useEffect(() => { const element = wrapRef.current; if (!element || hasInteracted || introStartedRef.current) return undefined; const isMobile = window.matchMedia('(max-width: 768px)').matches; if (isMobile) return undefined; const observer = new IntersectionObserver((entries) => { entries.forEach((entry) => { if (!entry.isIntersecting || introStartedRef.current) return; introStartedRef.current = true; const totalFrames = 72; let frame = 0; const animate = () => { frame += 1; const progress = frame / totalFrames; const next = progress < 0.5 ? 80 - (80 - 30) * (progress / 0.5) : 30 + (50 - 30) * ((progress - 0.5) / 0.5); applySplit(next, { syncPreset: true }); if (frame < totalFrames && !hasInteracted) { introFrameRef.current = requestAnimationFrame(animate); } }; window.setTimeout(() => { introFrameRef.current = requestAnimationFrame(animate); }, 320); observer.disconnect(); }); }, { threshold: 0.45 }); observer.observe(element); return () => observer.disconnect(); }, [applySplit, hasInteracted]); const onPointerDown = (event) => { if (event.pointerType === 'mouse' && event.button !== 0) return; setHasInteracted(true); setDragging(true); if (wrapRef.current) wrapRef.current.setPointerCapture?.(event.pointerId); updateFromClientX(event.clientX); }; const jumpToPreset = (value) => { setHasInteracted(true); scheduleSplit(value, { syncPreset: true }); }; return (
// 04 ยท BEFORE / AFTER

Same client.
Different planet.

Drag to reveal. Left is what they had. Right is what ships now โ€” a totally different brand voice. We design to their world, not ours.
{[{ l:'TIME ON SITE',a:'0:23',b:'3:41',d:'+860%' },{ l:'CONVERSION',a:'1.1%',b:'6.4%',d:'+482%' },{ l:'BOUNCE',a:'74%',b:'22%',d:'-70%' }].map((r,i) => (
{r.l}
{r.a}
{r.b}
{r.d}
))}
{['#ff5f57','#febc2e','#28c840'].map((color) =>
)}
โ—petalandco.studio
โ— BEFORE ยท 2014
AFTER ยท QD โ—
{PRESET_SPLITS.map((preset) => ( ))}
// PETAL & CO. ยท brand + storefront redesign ยท 9-day turnaround โ†— Read the case study
); }; window.__QD = { ...window.__QD, BeforeAfter };