{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "hero-cinemagraph", "type": "registry:block", "title": "Cinemagraph micro-motion hero", "description": "One still photo with a single living region (sway, breathe or glint) isolated by a soft mask, no video file, with a pause control.", "author": "StoreKit ", "categories": [ "hero", "any" ], "dependencies": [ "motion", "lucide-react" ], "registryDependencies": [ "https://storekit-eight.vercel.app/r/cn.json", "https://storekit-eight.vercel.app/r/sk-analytics.json" ], "files": [ { "path": "hero/hero-cinemagraph.tsx", "content": "\"use client\"\n\nimport { useEffect, useRef, useState } from \"react\"\nimport { motion, useInView, useReducedMotion } from \"motion/react\"\nimport { Pause, Play } from \"lucide-react\"\nimport { cn } from \"@/components/storekit/lib/cn\"\nimport { useSkBlock } from \"@/components/storekit/lib/sk-analytics\"\n\n/* Cinemagraph micro-motion hero. One still photograph, one living detail.\n No video file: a soft-edged mask isolates a `region` of the same image and\n only that region moves (a slow sway, a breath or a passing glint), so the\n scene reads as a photo with a single loop in it. The loop stops when the\n hero leaves the viewport, a pause control satisfies WCAG 2.2.2, and with\n reduced motion the image is simply still. Copy sits on a paper-token fade\n over the quiet side of the frame on lg and stacks below the image on\n mobile. */\n\nconst EASE = [0.23, 1, 0.32, 1] as const\n\ntype Cta = { label: string; href: string }\ntype Region = { x: number; y: number; rx: number; ry: number }\n\nconst PRIMARY =\n \"sk-btn inline-flex min-h-12 items-center justify-center py-2.5 text-center leading-tight rounded-sk-btn bg-sk-accent px-7 text-[15px] font-medium text-sk-accent-ink outline-none transition-[filter,transform] duration-200 ease-sk-out hover:brightness-[1.06] focus-visible:ring-2 focus-visible:ring-sk-accent focus-visible:ring-offset-2 focus-visible:ring-offset-sk-paper active:scale-[0.97]\"\nconst SECONDARY =\n \"sk-btn inline-flex min-h-12 items-center justify-center py-2.5 text-center leading-tight rounded-sk-btn border border-sk-line px-7 text-[15px] font-medium text-sk-ink outline-none transition-[background-color,transform] duration-200 ease-sk-out hover:bg-sk-ink/[0.04] focus-visible:ring-2 focus-visible:ring-sk-accent focus-visible:ring-offset-2 focus-visible:ring-offset-sk-paper active:scale-[0.97]\"\n\nexport function HeroCinemagraph({\n image = \"/placeholder.webp\",\n imageAlt = \"\",\n region = { x: 44, y: 30, rx: 14, ry: 28 },\n effect = \"sway\",\n period = 7,\n focus = \"70% center\",\n eyebrow = \"Slow mornings\",\n headline = \"The quiet part of your routine.\",\n subcopy = \"One scoop, a glass of water and a minute of sun. Daily essentials that fit the way you already start the day.\",\n primaryCta = { label: \"Shop the routine\", href: \"#\" },\n secondaryCta = { label: \"Our ingredients\", href: \"#\" },\n className,\n}: {\n image?: string\n imageAlt?: string\n /** The living area, as an ellipse in percent of the frame. */\n region?: Region\n /** sway: drifting shadows or leaves. breathe: steam, fabric, water. glint: light passing over glass or foil. */\n effect?: \"sway\" | \"breathe\" | \"glint\"\n /** Seconds per loop. Slower reads as calmer. */\n period?: number\n /** object-position for the photo, so the subject stays in frame on narrow screens. */\n focus?: string\n eyebrow?: string\n headline?: string\n subcopy?: string\n primaryCta?: Cta\n secondaryCta?: Cta\n className?: string\n}) {\n const prefersReduced = useReducedMotion()\n // Server HTML assumes motion; read the preference only after hydration so markup matches.\n const [hydrated, setHydrated] = useState(false)\n useEffect(() => setHydrated(true), [])\n const reduce = hydrated && !!prefersReduced\n const sk = useSkBlock(\"hero\", \"hero-cinemagraph\")\n const frame = useRef(null)\n const inView = useInView(frame, { amount: 0.2 })\n const [paused, setPaused] = useState(false)\n const live = !reduce && !paused && inView\n\n const mask = `radial-gradient(ellipse ${region.rx}% ${region.ry}% at ${region.x}% ${region.y}%, rgb(0 0 0) 35%, transparent 100%)`\n const loop = { duration: period, ease: \"easeInOut\" as const, repeat: Infinity, repeatType: \"mirror\" as const }\n const motionFor =\n effect === \"sway\"\n ? { animate: live ? { x: [0, 7, -3], skewX: [0, 0.8, -0.4] } : { x: 0, skewX: 0 } }\n : effect === \"breathe\"\n ? { animate: live ? { scale: [1, 1.025, 1.01], y: [0, -4, 0] } : { scale: 1, y: 0 } }\n : { animate: { x: 0 } }\n\n const rise = (i: number) => ({\n initial: { opacity: 0, y: reduce ? 0 : 8 },\n animate: { opacity: 1, y: 0 },\n transition: { duration: 0.5, ease: EASE, delay: reduce ? 0 : 0.1 + i * 0.06 },\n })\n\n return (\n
\n
\n {imageAlt}\n {!reduce ? (\n
\n {effect === \"glint\" ? (\n \n ) : (\n \n )}\n
\n ) : null}\n
\n\n
\n
\n \n {eyebrow}\n \n \n {headline}\n \n \n {subcopy}\n \n \n sk.emit(\"interact\", \"cta\")} className={PRIMARY}>\n {primaryCta.label}\n \n sk.emit(\"interact\", \"cta_secondary\")} className={SECONDARY}>\n {secondaryCta.label}\n \n \n
\n
\n
\n )\n}\n", "type": "registry:block", "target": "components/storekit/hero/hero-cinemagraph.tsx" } ], "docs": "Set `region` over the area that should move (shadows, steam, liquid). Unlike hero-video it needs no clip; it stops offscreen and under reduced motion.", "meta": { "section": "hero", "variant": "cinemagraph", "niche": [ "any" ], "commerce": [ "cta" ], "previewHeight": 620 } }