61:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 62:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 63:T27c6,import { useRef } from "react"; import type { PointerEvent as ReactPointerEvent } from "react"; import { motion, useAnimationFrame, useMotionValue, useReducedMotion, useSpring, useTransform } from "framer-motion"; // The headline is painted on the shop window. What you read on the wall is its shadow. const hero = { lines: ["Bread at", "first light."], sign: "Halcyon Bakehouse", line: "Sourdough, rye and morning buns out of the oven at six. Gone, most days, by ten.", button: "See today's bake", }; /** The wall out of the sun, and the same wall with the sun on it. Every shadow is simply the first colour again. */ const SHADE = "#6b5f52"; const SUNLIT = "#ffefcf"; /** Leaves of the branch outside the window: position along the twig, side, length and angle in degrees. */ const leaves = [ { at: 0.08, side: 1, long: 64, turn: 48 }, { at: 0.2, side: -1, long: 72, turn: -52 }, { at: 0.33, side: 1, long: 78, turn: 40 }, { at: 0.45, side: -1, long: 70, turn: -44 }, { at: 0.58, side: 1, long: 74, turn: 36 }, { at: 0.7, side: -1, long: 62, turn: -40 }, { at: 0.82, side: 1, long: 58, turn: 30 }, { at: 0.93, side: -1, long: 50, turn: -30 }, { at: 1, side: 1, long: 54, turn: 4 }, ]; export default function BakeryHeroWhoseHeadlineIsTheShadowOfWindowLetteringThrownOnAWallByAMovingSun() { const reduce = useReducedMotion(); const steered = useRef(-1e6); /** Where the sun is on its pass, from 0 (high, early) to 1 (low and raking). */ const target = useMotionValue(0.5); const sun = useSpring(target, { stiffness: 26, damping: 14, mass: 1.4 }); useAnimationFrame((t) => { if (reduce || performance.now() - steered.current < 2600) return; target.set(0.5 + 0.44 * Math.sin(t / 3800 - 0.5)); }); // The window stands at right angles to the wall, so its patch of light is stretched along the wall and // slopes downhill away from the glass. A lower sun stretches it further and flattens the slope. const cast = useTransform(sun, (a) => `matrix(${(0.8 + 0.5 * a).toFixed(4)}, ${(0.21 - 0.13 * a).toFixed(4)}, 0, 1, 0, 0)`); const warmth = useTransform(sun, [0, 1], [0, 0.34]); const bounce = useTransform(sun, [0, 1], ["34%", "52%"]); const bounceX = useTransform(bounce, (v) => `radial-gradient(60% 55% at ${v} 42%, rgba(255,214,150,0.34) 0%, rgba(255,214,150,0) 70%)`); function steer(e: ReactPointerEvent) { if (reduce) return; const r = e.currentTarget.getBoundingClientRect(); target.set(Math.min(1, Math.max(0, (e.clientX - r.left) / r.width))); steered.current = performance.now(); } return (

{/* Light that bounces off the lit patch and lifts the wall around it a little. */} {/* The patch of sun. Its outline is the window frame; everything inside that blocks light is drawn in the wall's own shade colour. */}

{/* Transom: a row of small panes above the main sheet of glass. */}

{hero.lines.map((text) => ( {text} ))}

{/* A branch outside moves in the wind. It is further from the wall than the glass, so its shadow is softer. */} {/* The next window along: plain glass, mostly out of frame. */}

{/* Hand-trowelled plaster: fine grain plus broad, uneven patches, laid over the light and the shadow alike. */}

); } 60:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","framer-motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/framer-motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"framer-motion"}]]}]}]]}],["$","$L61",null,{"namespace":"@weinc","registryDependencies":[]}]]}],null]}],["$","$L62",null,{"files":[{"path":"components/we-inc/bakery-hero-whose-headline-is-the-shadow-of-window-lettering-thrown-on-a-wall-by-a-moving-sun.tsx","content":"$63","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]