16:I[54961,["/_next/static/immutable/chunks/10r1qlsoygogh.js","/_next/static/immutable/chunks/1_f1jqdld4ngu.js","/_next/static/immutable/chunks/19vifo6_mi-qi.js","/_next/static/immutable/chunks/3kb194ft35tsv.js","/_next/static/immutable/chunks/1kmzbl6k42gme.js","/_next/static/immutable/chunks/1ekzdpc_7chvz.js","/_next/static/immutable/chunks/3kscktpsmulhw.js","/_next/static/immutable/chunks/1wyf15k9llk8a.js"],"default"] 17:T2929,'use client'; import { useEffect, useRef, useState } from 'react'; import { clampNumber, frameLoop, isHex, reducedMotion } from './frame-loop'; /** * PetalScatter — a serif word that comes apart as petals. The word is sampled into a few thousand * points; on release each point becomes a fluttering petal (an ellipse that turns in 3D) lifted by a * gust and carried sideways on a soft curl of wind, staying in a loose band. On return the petals fly * home from left to right on a damped spring and the crisp word fades back over them. */ export type PetalScatterProps = { word?: string; /** Second petal colour, mixed in with the ink. */ accent?: string; ink?: string; background?: string; /** 0–2: strength of the gust. */ wind?: number; autoPlay?: boolean; compact?: boolean; paused?: boolean; className?: string; }; export type Petal = { hx: number; hy: number; x: number; y: number; vx: number; vy: number; a: number; va: number; size: number; tone: number; delay: number; }; const STIFF = 38, DAMP = 2 * Math.sqrt(STIFF) * 0.85; /** Wind acceleration at (x,y), time t: a steady push plus a smooth curl so petals swirl, not stream. */ export function petalWind(x: number, y: number, t: number, strength: number) { const a = Math.sin(x * 0.011 + t * 0.8) + Math.cos(y * 0.017 - t * 0.6), b = Math.cos(x * 0.013 - t * 0.5) - Math.sin(y * 0.009 + t * 0.9); return { ax: (60 + a * 55) * strength, ay: b * 42 * strength }; } /** Spring a petal home; returns its remaining distance. */ export function petalHome(p: Petal, dt: number) { p.vx += ((p.hx - p.x) * STIFF - p.vx * DAMP) * dt; p.vy += ((p.hy - p.y) * STIFF - p.vy * DAMP) * dt; p.x += p.vx * dt; p.y += p.vy * dt; p.a *= Math.exp(-dt * 4); return Math.hypot(p.hx - p.x, p.hy - p.y); } export default function PetalScatter({ word = 'Bloom', accent = '#c8264b', ink = '#efe8dc', background = '#060505', wind = 1, autoPlay = true, compact = false, paused = false, className = '', }: PetalScatterProps) { const root = useRef(null), canvas = useRef(null); const text = String(word ?? '') .trim() .slice(0, 14) || 'Bloom'; const [scattered, setScattered] = useState(false); const tune = useRef({ accent: isHex(accent) ? accent : '#c8264b', ink: isHex(ink) ? ink : '#efe8dc', wind: clampNumber(wind, 1, 0, 2), autoPlay, }); tune.current = { accent: isHex(accent) ? accent : '#c8264b', ink: isHex(ink) ? ink : '#efe8dc', wind: clampNumber(wind, 1, 0, 2), autoPlay, }; const pausedRef = useRef(paused); pausedRef.current = paused; const api = useRef<{ set: (s: boolean) => void; wake: () => void; touch: () => void; }>({ set: () => {}, wake: () => {}, touch: () => {} }); useEffect(() => { const host = root.current, cv = canvas.current; if (!host || !cv) return; const ctx = cv.getContext('2d'); if (!ctx) return; let w = 1, h = 1, dpr = 1, petals: Petal[] = [], mode: 'whole' | 'out' | 'home' = scattered ? 'out' : 'whole', since = 0, clock = 0, textAlpha = 1, touched = false, nextAuto = 2.4, font = ''; const motion = reducedMotion(() => loop.wake()); const sample = () => { const box = host.getBoundingClientRect(); w = Math.max(1, box.width); h = Math.max(1, box.height); dpr = Math.min(2, devicePixelRatio || 1); cv.width = Math.round(w * dpr); cv.height = Math.round(h * dpr); const size = Math.min(h * 0.26, (w * 1.25) / Math.max(3, text.length)); font = `400 ${size}px "Cormorant Garamond","Cinzel",Georgia,"Times New Roman",serif`; const off = document.createElement('canvas'); off.width = Math.ceil(w); off.height = Math.ceil(h); const o = off.getContext('2d'); if (!o) return; o.font = font; o.textAlign = 'center'; o.textBaseline = 'middle'; o.fillStyle = '#fff'; o.fillText(text, w / 2, h * 0.44); const data = o.getImageData(0, 0, off.width, off.height).data, step = Math.max(2, Math.round(size / 38)), list: Petal[] = []; for (let y = 0; y < off.height; y += step) for (let x = 0; x < off.width; x += step) if (data[(y * off.width + x) * 4 + 3] > 140) list.push({ hx: x, hy: y, x, y, vx: 0, vy: 0, a: Math.random() * 6.28, va: (Math.random() - 0.5) * 9, size: step * (0.9 + Math.random() * 1.1), tone: Math.random(), delay: (x / w) * 0.5 + Math.random() * 0.15, }); petals = list.slice(0, 4200); if (mode !== 'whole') petals.forEach((p) => { p.x = p.hx + (Math.random() - 0.2) * w * 0.6; p.y = p.hy + (Math.random() - 0.5) * h * 0.18; }); }; const draw = () => { ctx.setTransform(dpr, 0, 0, dpr, 0, 0); ctx.clearRect(0, 0, w, h); const { ink, accent } = tune.current; if (textAlpha < 1) { for (const p of petals) { const flip = Math.cos(p.a); ctx.fillStyle = p.tone < 0.38 ? accent : ink; ctx.globalAlpha = 0.55 + 0.45 * Math.abs(flip); ctx.beginPath(); ctx.ellipse( p.x, p.y, p.size * 0.5 * Math.max(0.18, Math.abs(flip)), p.size * 0.28, p.a * 0.5, 0, Math.PI * 2, ); ctx.fill(); } } if (textAlpha > 0) { ctx.globalAlpha = textAlpha; ctx.fillStyle = ink; ctx.font = font; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText(text, w / 2, h * 0.44); } ctx.globalAlpha = 1; }; const set = (out: boolean) => { if (motion.query.matches) { mode = out ? 'out' : 'whole'; textAlpha = out ? 0 : 1; host.dataset.mode = mode; draw(); return; } if (out) { mode = 'out'; since = 0; textAlpha = 0; petals.forEach((p) => { const kick = 1 + Math.random(); p.vx = (Math.random() - 0.25) * 160 * kick; p.vy = (Math.random() - 0.5) * 220; p.va = (Math.random() - 0.5) * 12; }); } else { mode = 'home'; since = 0; } host.dataset.mode = mode; loop.wake(); }; const loop = frameLoop( host, (dt) => { clock += dt; since += dt; const still = motion.query.matches; if (!still) { if (mode === 'out') { const s = tune.current.wind; for (const p of petals) { const f = petalWind(p.x, p.y, clock, s); p.vx += (f.ax - p.vx * 0.9) * dt; p.vy += (f.ay - p.vy * 0.9 + (p.hy - p.y) * 0.9) * dt; p.x += p.vx * dt; p.y += p.vy * dt; p.a += p.va * dt; if (p.x > w + 40) { p.x = -40; } } } else if (mode === 'home') { let far = 0; for (const p of petals) { if (since < p.delay) { p.a += p.va * dt; continue; } far = Math.max(far, petalHome(p, dt)); } if (since > 0.6 && far < 1.2) { textAlpha = Math.min(1, textAlpha + dt * 3); if (textAlpha >= 1) { mode = 'whole'; host.dataset.mode = mode; } } } if (tune.current.autoPlay && !touched && clock > nextAuto) { if (mode === 'whole') { nextAuto = clock + 3.4; setScattered(true); set(true); } else if (mode === 'out') { nextAuto = clock + 3.2; setScattered(false); set(false); } } } draw(); return !still && (mode !== 'whole' || (tune.current.autoPlay && !touched)); }, () => pausedRef.current, ); api.current = { set, wake: () => loop.wake(), touch: () => { touched = true; }, }; const resized = new ResizeObserver(() => { sample(); draw(); }); resized.observe(host); const fontReady = (document as Document & { fonts?: FontFaceSet }).fonts?.ready; fontReady ?.then(() => { sample(); draw(); }) .catch(() => {}); sample(); draw(); host.dataset.mode = mode; host.dataset.ready = 'true'; loop.wake(); return () => { loop.dispose(); motion.dispose(); resized.disconnect(); delete host.dataset.ready; delete host.dataset.mode; }; }, [text]); // eslint-disable-line react-hooks/exhaustive-deps useEffect(() => { api.current.wake(); }, [paused, autoPlay, ink, accent]); const toggle = () => { api.current.touch(); const next = !scattered; setScattered(next); api.current.set(next); }; return (

); } const styles = ` .petal-scatter{position:relative;width:100%;height:100%;min-height:240px;overflow:hidden;container-type:size} .petal-scatter canvas{position:absolute;inset:0;width:100%;height:100%;display:block} .ps-button{position:absolute;left:0;right:0;margin-inline:auto;width:fit-content;bottom:clamp(14px,12cqh,90px);padding:.55em 1.2em;border:1px solid currentColor;border-radius:4px;background:transparent;color:inherit;font:500 clamp(8px,1cqw,11px)/1 Georgia,serif;letter-spacing:.2em;text-transform:uppercase;opacity:.65;cursor:pointer;transition:opacity .3s ease} .ps-button:hover,.ps-button:focus-visible{opacity:1;outline:none} .ps-button:focus-visible{box-shadow:0 0 0 2px currentColor} @media (prefers-reduced-motion:reduce){.ps-button{transition:none}} `; 18:Ta89,/** * Shared animation loop for Motiqo motion pieces. It runs `tick` on requestAnimationFrame only while * the host is on screen, the tab is visible and the caller is not paused; `tick` returns false when * there is nothing left to animate, and `wake()` starts it again. Time is passed in seconds, clamped * so a long stall never produces a jump. */ export type FrameLoop = { wake: () => void; dispose: () => void; readonly running: boolean; }; export function frameLoop( host: Element, tick: (dt: number, time: number) => boolean | void, blocked: () => boolean = () => false, ): FrameLoop { let raf = 0, last = 0, time = 0, onScreen = true, disposed = false; const allowed = () => !disposed && onScreen && !document.hidden && !blocked(); const frame = (now: number) => { raf = 0; const dt = last ? Math.min(0.05, Math.max(0, (now - last) / 1000)) : 1 / 60; last = now; time += dt; const more = tick(dt, time); if (more !== false && allowed()) raf = requestAnimationFrame(frame); else last = 0; }; const wake = () => { if (allowed()) { if (!raf) raf = requestAnimationFrame(frame); } else { if (raf) cancelAnimationFrame(raf); raf = 0; last = 0; } }; const seen = new IntersectionObserver(([entry]) => { onScreen = entry.isIntersecting; wake(); }); seen.observe(host); document.addEventListener('visibilitychange', wake); return { wake, dispose() { disposed = true; if (raf) cancelAnimationFrame(raf); raf = 0; seen.disconnect(); document.removeEventListener('visibilitychange', wake); }, get running() { return raf !== 0; }, }; } /** Subscribes to prefers-reduced-motion; returns the query and an unsubscribe function. */ export function reducedMotion(onChange: () => void) { const query = matchMedia('(prefers-reduced-motion: reduce)'); query.addEventListener('change', onChange); return { query, dispose: () => query.removeEventListener('change', onChange) }; } export const clampNumber = ( value: unknown, fallback: number, min: number, max: number, ) => { const n = typeof value === 'number' && Number.isFinite(value) ? value : fallback; return Math.min(max, Math.max(min, n)); }; export const isHex = (value: unknown): value is string => typeof value === 'string' && /^#[\da-f]{6}$/i.test(value); export const smooth = (t: number) => { const x = Math.min(1, Math.max(0, t)); return x * x * (3 - 2 * x); }; export const easeOutBack = (t: number) => { const x = Math.min(1, Math.max(0, t)), c = 1.70158; return 1 + (c + 1) * Math.pow(x - 1, 3) + c * Math.pow(x - 1, 2); }; b:["$","$L16",null,{"viewer":{"user":null,"pro":false,"plan":null,"renewsAt":null,"cancelAtPeriodEnd":false,"provider":null},"initialView":"preview","originalSource":{"petal-scatter":[{"name":"petal-scatter.tsx","code":"$17"},{"name":"frame-loop.ts","code":"$18"}]},"initialElement":"petal-scatter","initialConfiguration":"$undefined","initialSaved":false,"initialTag":"","initialGroup":"$undefined","initialFree":false}]