# Edit Sentence That Gathers into a Bead of Wet Paint and Falls onto a Lacquered Page Model > Demo of editing a site by saying it: the sentence gathers into a bead of paint that falls onto a page model and spreads. Free React and HTML code. A shadcn/ui block from the [@weinc](https://we.inc/components?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/weinc/edit-sentence-that-gathers-into-a-bead-of-wet-paint-and-falls-onto-a-lacquered-page-model). - Page, with a live preview: https://shadcn.exchange/r/weinc/edit-sentence-that-gathers-into-a-bead-of-wet-paint-and-falls-onto-a-lacquered-page-model - Screenshot: https://shadcn.exchange/shot/weinc/edit-sentence-that-gathers-into-a-bead-of-wet-paint-and-falls-onto-a-lacquered-page-model/light.png - Registry item: https://we.inc/r/edit-sentence-that-gathers-into-a-bead-of-wet-paint-and-falls-onto-a-lacquered-page-model.json - Listed: 2026-10-28, source last changed 2026-10-28 ## Install ```bash npx shadcn@latest add https://shadcn.exchange/r/weinc/edit-sentence-that-gathers-into-a-bead-of-wet-paint-and-falls-onto-a-lacquered-page-model.json ``` Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on. ## Dependencies - npm packages: `framer-motion` ## Files ### `components/we-inc/edit-sentence-that-gathers-into-a-bead-of-wet-paint-and-falls-onto-a-lacquered-page-model.tsx` ```tsx import { useEffect, useRef, useState } from "react"; import { useReducedMotion } from "framer-motion"; /** Everything painted on the board. Change the business here. */ const site = { brand: "Halloway Flowers", links: ["Bouquets", "Weddings", "Visit"], headline: ["Flowers cut", "this morning."], sub: "Hand-tied in the shop on Mill Lane, ready by noon.", cta: "Order a bouquet", photo: { src: "https://images.pexels.com/photos/8127839/pexels-photo-8127839.jpeg?auto=compress&cs=tinysrgb&w=600", alt: "Deep red peonies in a steel vase against a grey wall" }, }; const BLUE = "#4F98FB"; const INK = "#0B0D12"; const PAPER = "#FBFAF7"; const WARM = "#DC7440"; const COOL = "#E3E6EA"; const NIGHT = "#12151C"; const sans = '"Inter Tight", "Inter", ui-sans-serif, system-ui, sans-serif'; type Look = { header: 0 | 1; button: 0 | 1; body: 0 | 1 }; type Part = "header" | "button" | "body" | "reset"; const FRESH: Look = { header: 0, button: 0, body: 0 }; // Design pixels. The board is drawn at this size and the scene is scaled to fit. const W = 560; const H = 390; const SCENE_W = 900; const SCENE_H = 420; /** Where each coat lands, and the shape it has to stay inside. */ const zones: Record = { header: { x: 0, y: 0, w: W, h: 58, radius: "14px 14px 0 0", cx: 300, cy: 29 }, button: { x: 36, y: 300, w: 184, h: 52, radius: "26px", cx: 128, cy: 326 }, body: { x: 0, y: 0, w: W, h: H, radius: "14px", cx: 250, cy: 210 }, reset: { x: 0, y: 0, w: W, h: H, radius: "14px", cx: 280, cy: 190 }, }; const chips: { part: Part; label: string }[] = [ { part: "header", label: "Header" }, { part: "button", label: "Button" }, { part: "body", label: "Page" }, { part: "reset", label: "Start again" }, ]; /** What saying it does: the sentence, the look afterwards and the colour of the bead. */ function plan(look: Look, part: Part): { say: string; next: Look; paint: string } { if (part === "header") return look.header ? { say: "Cool the header down.", next: { ...look, header: 0 }, paint: look.body ? "#232936" : COOL } : { say: "Make the header warmer.", next: { ...look, header: 1 }, paint: WARM }; if (part === "button") return look.button ? { say: "Make the button plain.", next: { ...look, button: 0 }, paint: look.body ? PAPER : INK } : { say: "Turn the button blue.", next: { ...look, button: 1 }, paint: BLUE }; if (part === "body") return look.body ? { say: "Make the page light.", next: { ...look, body: 0 }, paint: PAPER } : { say: "Make the page dark.", next: { ...look, body: 1 }, paint: NIGHT }; return { say: "Start again in white.", next: FRESH, paint: PAPER }; } const clamp = (v: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, v)); const easeOut = (t: number) => 1 - Math.pow(1 - t, 3); /** The page as it is painted on the board, for one look. */ function Face({ look, hidden }: { look: Look; hidden?: boolean }) { const dark = look.body === 1; const text = dark ? "#F6F4EF" : INK; const soft = dark ? "#A9B0BF" : "#565B66"; const head = look.header ? WARM : dark ? "#232936" : COOL; const headText = look.header ? INK : text; const btn = look.button ? BLUE : dark ? PAPER : INK; const btnText = look.button ? INK : dark ? INK : "#FFFFFF"; const Title = hidden ? "p" : "h2"; return (
{site.links.map((l) => ( {l} ))}
{site.headline.map((l) => ( <span key={l} className="block"> {l} </span> ))}

{site.sub}

{site.cta}
{hidden
); } export default function PaintBeadPageEdit() { const reduce = useReducedMotion(); const stageRef = useRef(null); const pillRef = useRef(null); const typedRef = useRef(null); const swatchRef = useRef(null); const wrapRef = useRef(null); const sceneRef = useRef(null); const boardRef = useRef(null); const coatRef = useRef(null); const rimBoxRef = useRef(null); const rimRef = useRef(null); const spotRef = useRef(null); const wetRef = useRef(null); const beadRef = useRef(null); const first = plan(FRESH, "header"); const [cur, setCur] = useState(reduce ? first.next : FRESH); const [next, setNext] = useState(first.next); const [status, setStatus] = useState(""); const api = useRef<{ say: (p: Part) => void } | null>(null); useEffect(() => { const stage = stageRef.current, pill = pillRef.current, typed = typedRef.current, swatch = swatchRef.current, wrap = wrapRef.current, scene = sceneRef.current; const board = boardRef.current, coat = coatRef.current, rimBox = rimBoxRef.current, rim = rimRef.current, spot = spotRef.current, bead = beadRef.current, wet = wetRef.current; if (!stage || !pill || !typed || !swatch || !wrap || !scene || !board || !coat || !rimBox || !rim || !spot || !bead || !wet) return; // one coat of paint from sentence to dry const s = { look: reduce ? first.next : FRESH, // what is dry on the board to: first.next, part: "header" as Part, say: first.say, paint: first.paint, phase: reduce ? "rest" : "swell", t0: performance.now() + 500, slow: 2.3, // the first coat runs slower so a still picture catches it half way x0: 0, y0: 0, x1: 0, y1: 0, R: 0, dip: 0, vdip: 0, px: 0, py: 0, tx: 0, ty: 0, scale: 1, demo: 0, user: -1e9, held: false, ph: [0.4, 2.1, 4.4], }; let raf = 0; let visible = true; let last = performance.now(); const TYPE = 26, SWELL = 400, FALL = 380, SPREAD = 1500, DRY = 1900, GAP = 650; const measure = () => { const sc = clamp(wrap.clientWidth / 700, 0.42, 1.2); s.scale = sc; wrap.style.height = `${Math.round(SCENE_H * sc)}px`; scene.style.transform = `translateX(-50%) scale(${sc.toFixed(4)})`; }; measure(); const ro = new ResizeObserver(measure); ro.observe(wrap); const lips = rim.querySelectorAll("path"); /** The coat is a puddle, not a compass circle: its edge runs ahead in some directions and lags in others. */ const setCoat = (r: number, wetness: number) => { const z = zones[s.part]; const lag = 0.11 * (1 - (r / (s.R || 1)) * 0.6); let d = ""; for (let i = 0; i < 44; i++) { const a = (i / 44) * Math.PI * 2; const rr = r * (1 + lag * (Math.sin(3 * a + s.ph[0]) * 0.5 + Math.sin(5 * a + s.ph[1]) * 0.32 + Math.sin(8 * a + s.ph[2]) * 0.18)); d += `${i ? "L" : "M"}${(z.cx + Math.cos(a) * rr).toFixed(1)} ${(z.cy + Math.sin(a) * rr).toFixed(1)}`; } d += "Z"; coat.style.clipPath = `path("${d}")`; wet.style.clipPath = `path("${d}")`; wet.style.opacity = wetness.toFixed(3); lips.forEach((l) => l.setAttribute("d", d)); }; const aim = () => { const z = zones[s.part]; rimBox.style.left = `${z.x}px`; rimBox.style.top = `${z.y}px`; rimBox.style.width = `${z.w}px`; rimBox.style.height = `${z.h}px`; rimBox.style.borderRadius = z.radius; rim.style.left = `${-z.x}px`; rim.style.top = `${-z.y}px`; wet.style.left = `${-z.x}px`; wet.style.top = `${-z.y}px`; s.ph = [Math.random() * 6.3, Math.random() * 6.3, Math.random() * 6.3]; spot.style.left = `${z.cx}px`; spot.style.top = `${z.cy}px`; s.R = Math.hypot(Math.max(z.cx - z.x, z.x + z.w - z.cx), Math.max(z.cy - z.y, z.y + z.h - z.cy)) * 1.14 + 8; swatch.style.background = s.paint; bead.style.setProperty("--paint", s.paint); }; /** Where the bead leaves the bar and where it lands, in stage pixels. */ const sight = () => { const sr = stage.getBoundingClientRect(), pr = pill.getBoundingClientRect(), tr = spot.getBoundingClientRect(); s.x1 = tr.left + tr.width / 2 - sr.left; s.y1 = tr.top + tr.height / 2 - sr.top; s.x0 = clamp(s.x1, pr.left - sr.left + 44, pr.right - sr.left - 44); s.y0 = pr.bottom - sr.top; }; const begin = (part: Part, now: number, typeIt: boolean) => { // whatever was wet becomes the dry coat underneath s.look = s.to; setCur(s.to); const p = plan(s.look, part); s.part = part; s.to = p.next; s.say = p.say; s.paint = p.paint; aim(); setCoat(0, 0); rim.style.opacity = "0"; setNext(p.next); setStatus(p.say); if (reduce) { typed.textContent = p.say; s.look = p.next; setCur(p.next); s.phase = "rest"; return; } s.slow = 1; s.phase = typeIt ? "type" : "swell"; s.t0 = now; }; aim(); setCoat(0, 0); typed.textContent = s.say; const tick = (now: number) => { const dt = Math.min(0.033, (now - last) / 1000); last = now; const t = now - s.t0; const size = 40 * s.scale + 10; if (s.phase === "type") { const n = Math.min(s.say.length, Math.floor(t / TYPE)); if (typed.dataset.n !== `${s.part}${n}`) { typed.dataset.n = `${s.part}${n}`; typed.textContent = s.say.slice(0, n); } if (n >= s.say.length && t > s.say.length * TYPE + 160) { s.phase = "swell"; s.t0 = now; } } else if (s.phase === "swell" && t >= 0) { if (t < 20 || !s.x0) sight(); const k = clamp(t / SWELL, 0, 1); const g = easeOut(k); const sway = Math.sin(t / 60) * (1 - k) * 0.06; bead.style.opacity = "1"; bead.style.width = `${size}px`; bead.style.height = `${size}px`; bead.style.transform = `translate(${(s.x0 - size / 2).toFixed(1)}px, ${(s.y0 - size * (1 - 0.72 * g)).toFixed(1)}px) scale(${(0.35 + 0.65 * g + sway).toFixed(3)}, ${(0.35 + 0.65 * g + 0.22 * k * k).toFixed(3)})`; if (k >= 1) { sight(); s.phase = "fall"; s.t0 = now; } } else if (s.phase === "fall") { const k = clamp(t / FALL, 0, 1); const y = s.y0 - size * 0.28 + (s.y1 - size * 0.5 - (s.y0 - size * 0.28)) * k * k; const x = s.x0 + (s.x1 - s.x0) * k; bead.style.transform = `translate(${(x - size / 2).toFixed(1)}px, ${y.toFixed(1)}px) scale(${(1 - 0.16 * k).toFixed(3)}, ${(1.1 + 0.34 * k).toFixed(3)})`; spot.style.opacity = (0.5 * k * k).toFixed(3); spot.style.transform = `translate(-50%, -50%) scale(${(2.6 - 1.6 * k).toFixed(3)})`; if (k >= 1) { bead.style.opacity = "0"; spot.style.opacity = "0"; s.vdip = -230; s.phase = "spread"; s.t0 = now; } } else if (s.phase === "spread") { const k = clamp(t / (SPREAD * s.slow), 0, 1); // fast out of the splash, then slow like something thick const r = s.R * (0.14 * easeOut(clamp(k * 9 * s.slow, 0, 1)) + 0.86 * (1 - Math.pow(1 - k, s.slow > 1 ? 1.25 : 2))); setCoat(r, 1); rim.style.opacity = clamp((1 - k) * 5, 0, 1).toFixed(3); if (k >= 1) { s.look = s.to; setCur(s.to); s.phase = "dry"; s.t0 = now; } } else if (s.phase === "dry") { const k = clamp(t / DRY, 0, 1); setCoat(s.R, 1 - easeOut(k)); if (k >= 1) { s.phase = "rest"; s.t0 = now; } } else if (s.phase === "rest" && !reduce && t > GAP && now - s.user > 9000) { s.demo = (s.demo + 1) % chips.length; begin(chips[s.demo].part, now, true); } // the board takes the hit and settles; the gloss follows the pointer s.vdip += (-430 * s.dip - 17 * s.vdip) * dt; s.dip += s.vdip * dt; s.px += (s.tx - s.px) * 0.07; s.py += (s.ty - s.py) * 0.07; const idle = reduce ? 0 : Math.sin(now / 2400) * 1.4; board.style.transform = `rotateX(${(55 - s.py * 3).toFixed(2)}deg) rotateZ(${(-17 + s.px * 4 + idle).toFixed(2)}deg) translateZ(${s.dip.toFixed(2)}px)`; board.style.setProperty("--gx", `${(74 + s.px * 22 + idle * 3).toFixed(1)}%`); if (visible) raf = requestAnimationFrame(tick); }; const io = new IntersectionObserver(([e]) => { const was = visible; visible = e.isIntersecting; if (visible && !was) { last = performance.now(); raf = requestAnimationFrame(tick); } }); io.observe(stage); raf = requestAnimationFrame(tick); const move = (e: PointerEvent) => { const r = stage.getBoundingClientRect(); s.tx = clamp(((e.clientX - r.left) / r.width - 0.5) * 2, -1, 1); s.ty = clamp(((e.clientY - r.top) / r.height - 0.5) * 2, -1, 1); }; const leave = () => { s.tx = 0; s.ty = 0; s.held = false; }; const enter = () => { s.held = true; }; stage.addEventListener("pointermove", move); stage.addEventListener("pointerleave", leave); stage.addEventListener("pointerenter", enter); api.current = { say: (part) => { const now = performance.now(); s.user = now; s.demo = chips.findIndex((c) => c.part === part); bead.style.opacity = "0"; spot.style.opacity = "0"; begin(part, now, true); }, }; return () => { cancelAnimationFrame(raf); ro.disconnect(); io.disconnect(); stage.removeEventListener("pointermove", move); stage.removeEventListener("pointerleave", leave); stage.removeEventListener("pointerenter", enter); api.current = null; }; // eslint-disable-next-line react-hooks/exhaustive-deps }, [reduce]); return (
); } ```