# Steel Roller Shutter Stencilled Draft That Rattles Up to Show a Lit Shop Window Holding the Live Site > Publish toggle as a shopfront: a shutter marked DRAFT rattles up and the live site stands in the window. 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/steel-roller-shutter-stencilled-draft-that-rattles-up-to-show-a-lit-shop-window-holding-the-live-site). - Page, with a live preview: https://shadcn.exchange/r/weinc/steel-roller-shutter-stencilled-draft-that-rattles-up-to-show-a-lit-shop-window-holding-the-live-site - Screenshot: https://shadcn.exchange/shot/weinc/steel-roller-shutter-stencilled-draft-that-rattles-up-to-show-a-lit-shop-window-holding-the-live-site/light.png - Registry item: https://we.inc/r/steel-roller-shutter-stencilled-draft-that-rattles-up-to-show-a-lit-shop-window-holding-the-live-site.json - Listed: 2026-10-28, source last changed 2026-10-28 ## Install ```bash npx shadcn@latest add https://shadcn.exchange/r/weinc/steel-roller-shutter-stencilled-draft-that-rattles-up-to-show-a-lit-shop-window-holding-the-live-site.json ``` Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on. ## Files ### `components/we-inc/steel-roller-shutter-stencilled-draft-that-rattles-up-to-show-a-lit-shop-window-holding-the-live-site.tsx` ```tsx import { useEffect, useRef, useState } from "react"; // The site in the window. An invented bakery. const site = { name: "Oat Street Bakery", links: ["Bread", "Pastry", "Find us"], headline: "Bread out of the oven at seven.", copy: "Sourdough, rye and seeded loaves, baked through the night on Oat Street.", cta: "See today's bake", photo: "https://images.pexels.com/photos/30884563/pexels-photo-30884563.jpeg?auto=compress&cs=tinysrgb&w=1200", }; const STENCIL = "DRAFT"; // painted on the shutter const BLUE = "#4F98FB"; const FONT = '"Inter Tight", "Inter", ui-sans-serif, system-ui, sans-serif'; const W = 640; // width of the shutter box const OW = 584, OH = 420; // the window opening const SLAT = 24; // height of one slat const TRAVEL = OH - 22; // the bottom rail stays in sight under the box const HOLD = 9000; // how long the demo stays open before pulling the shutter down again type Api = { set: (open: boolean) => void }; export default function SteelRollerShutter() { const stage = useRef(null); const root = useRef(null); const curtain = useRef(null); const api = useRef(null); const [zoom, setZoom] = useState(1); const [live, setLive] = useState(false); useEffect(() => { const st = stage.current, el = root.current, cur = curtain.current; if (!st || !el || !cur) return; const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches; const scale = () => Math.max(0.46, Math.min(1.08, (st.clientWidth - 16) / (W + 36))); const fit = () => setZoom(scale()); fit(); const ro = new ResizeObserver(fit); ro.observe(st); // p: 0 shut, 1 fully rolled up. lit: how bright the shop lights are. const s = { p: reduce ? 1 : 0, v: 0, to: reduce ? 1 : 0, drag: false, grabY: 0, grabP: 0, lastY: 0, lastT: 0, on: reduce, onAt: -1e9, lit: reduce ? 1 : 0, shake: 0, touched: -1e9, live: false }; const paint = () => { el.style.setProperty("--p", s.p.toFixed(4)); el.style.setProperty("--lit", s.lit.toFixed(3)); cur.style.transform = `translate(${s.shake.toFixed(2)}px, ${(-s.p * TRAVEL).toFixed(2)}px)`; }; const tell = () => { const now = s.to === 1; if (now !== s.live) { s.live = now; setLive(now); } }; let raf = 0, last = 0, seen = true, timer = 0, begin = () => {}; const frame = (now: number) => { raf = 0; const dt = Math.max(0.004, Math.min(0.032, (now - last) / 1000 || 0.016)); last = now; if (!s.drag) { // sprung roller going up, dead weight coming down, and a stop at each end that it bounces off const pull = s.to === 1 ? 13 * (1.08 - s.p) + 1 : -5.5 - 16 * s.p; s.v += (pull - 3.4 * s.v) * dt; s.p += s.v * dt; if (s.p > 1) { s.p = 1; if (s.v > 0.25) s.shake = 2.6; s.v = s.v > 0.3 ? -s.v * 0.24 : 0; } if (s.p < 0) { s.p = 0; if (s.v < -0.25) s.shake = 3.4; s.v = s.v < -0.3 ? -s.v * 0.2 : 0; } } s.shake *= -0.72; if (Math.abs(s.shake) < 0.08) s.shake = 0; // the tubes inside catch a moment after the shutter clears them, and go out when it shuts if (!s.on && s.p > 0.1) { s.on = true; s.onAt = now; } if (s.on && s.p < 0.015 && s.to === 0) s.on = false; const t = now - s.onAt; s.lit = !s.on ? 0 : t < 70 ? 0.55 : t < 150 ? 0.08 : t < 230 ? 0.8 : t < 320 ? 0.3 : t < 380 ? 0.9 : 1; paint(); const rest = !s.drag && s.shake === 0 && Math.abs(s.v) < 0.004 && (s.p === 0 || s.p === 1 || Math.abs(s.p - s.to) < 0.001) && (!s.on || t > 400); if (rest) return; if (seen && !document.hidden) raf = requestAnimationFrame(frame); }; const wake = () => { if (!raf) { last = performance.now(); raf = requestAnimationFrame(frame); } }; const go = (open: boolean) => { s.to = open ? 1 : 0; tell(); if (reduce) { s.p = s.to; s.on = open; s.lit = open ? 1 : 0; paint(); return; } s.v += open ? 0.5 : -0.2; wake(); }; api.current = { set: (open) => { s.touched = performance.now(); go(open); } }; const down = (e: PointerEvent) => { if (reduce) return; s.drag = true; s.touched = performance.now(); s.grabY = e.clientY; s.grabP = s.p; s.lastY = e.clientY; s.lastT = performance.now(); s.v = 0; cur.setPointerCapture(e.pointerId); wake(); }; const move = (e: PointerEvent) => { if (!s.drag) return; const now = performance.now(), next = Math.max(0, Math.min(1, s.grabP - (e.clientY - s.grabY) / (TRAVEL * scale()))); s.v = ((next - s.p) / Math.max(0.008, (now - s.lastT) / 1000)) * 0.5; s.p = next; s.lastT = now; }; const up = () => { if (!s.drag) return; s.drag = false; s.touched = performance.now(); s.v = Math.max(-2.5, Math.min(2.5, s.v)); s.to = s.v > 0.5 || (s.v > -0.5 && s.p > 0.4) ? 1 : 0; tell(); wake(); }; cur.addEventListener("pointerdown", down); cur.addEventListener("pointermove", move); window.addEventListener("pointerup", up); window.addEventListener("pointercancel", up); paint(); tell(); if (reduce) { s.to = 1; tell(); } else { // The demo: up, hold, down, wait. It stands down while someone is using the shutter. const loop = (wait: number, open: boolean) => { timer = window.setTimeout(() => { if (seen && !document.hidden && performance.now() - s.touched > 8000) go(open); loop(open ? HOLD : 2400, !open); }, wait); }; // wait for the photograph, so the first thing anyone sees open is a finished window begin = () => loop(380, true); if (document.readyState === "complete") begin(); else window.addEventListener("load", begin, { once: true }); } const io = new IntersectionObserver(([entry]) => { seen = entry.isIntersecting; if (seen && (s.p !== s.to || s.drag)) wake(); }); io.observe(st); const vis = () => { if (!document.hidden && s.p !== s.to) wake(); }; document.addEventListener("visibilitychange", vis); return () => { cancelAnimationFrame(raf); window.clearTimeout(timer); window.removeEventListener("load", begin); api.current = null; ro.disconnect(); io.disconnect(); document.removeEventListener("visibilitychange", vis); cur.removeEventListener("pointerdown", down); cur.removeEventListener("pointermove", move); window.removeEventListener("pointerup", up); window.removeEventListener("pointercancel", up); }; }, []); const BW = W + 36, BH = 56 + OH + 16 + 84; // box the whole shopfront is laid out in const L = (BW - OW) / 2; // left edge of the opening return (
{/* light the open shop throws on the wall round it and on the pavement */}