{ "name": "pixel-dissolve-card-default", "type": "registry:block", "tier": "free", "dependencies": [ "motion" ], "registryDependencies": [ "https://www.craftui.space/r/craftui-base.json" ], "css": { ".pixcard-grid": { "grid-template-columns": "repeat(var(--pixcard-size, 14), 1fr)", "grid-template-rows": "repeat(var(--pixcard-size, 14), 1fr)" }, ".pixcard-tile": { "background-size": "calc(var(--pixcard-size, 14) * 100%) calc(var(--pixcard-size, 14) * 100%)", "background-repeat": "no-repeat", "transform": "scale(1.02)", "animation": "pixcard-out 0.32s cubic-bezier(0.4, 0, 1, 1) forwards" }, "@keyframes pixcard-out": { "from": { "opacity": "1" }, "to": { "opacity": "0" } }, "@media (prefers-reduced-motion: reduce)": { ".pixcard-tile": { "animation": "none" } } }, "files": [ { "path": "components/craftui/blocks/pixel-dissolve-card/default.tsx", "content": "\"use client\";\n\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\n\nexport type PixelDissolveSlide = {\n image: string;\n imageAlt?: string;\n heading: string;\n};\n\nexport interface PixelDissolveCardProps {\n slides?: PixelDissolveSlide[];\n /** Grid resolution of the dissolve — `size` × `size` tiles. */\n size?: number;\n /** Seconds between each tile group vanishing. */\n revealStep?: number;\n className?: string;\n}\n\nconst DEFAULT_SIZE = 14;\nconst DEFAULT_REVEAL_STEP = 0.045;\n/** Tail added after the last group starts, so the timer outlives the animation. */\nconst SETTLE_S = 0.4;\n\nconst DEFAULT_SLIDES: PixelDissolveSlide[] = [\n {\n image:\n \"https://images.unsplash.com/photo-1557672172-298e090bd0f1?q=80&w=900&auto=format&fit=crop\",\n imageAlt: \"Layered gradient light study\",\n heading:\n \"A moment where care flows freely between beings. An experience you are familiar with, but perhaps forgotten.\",\n },\n {\n image:\n \"https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=900&auto=format&fit=crop\",\n imageAlt: \"Abstract fluid shapes in warm tones\",\n heading:\n \"A quiet signal beneath the noise. The shape of an idea before it has learned to speak its own name.\",\n },\n {\n image:\n \"https://images.unsplash.com/photo-1541701494587-cb58502866ab?q=80&w=900&auto=format&fit=crop\",\n imageAlt: \"Soft blue and pink light diffusion\",\n heading:\n \"Motion is memory in disguise. Every pixel that fades was once certain of its place in the whole. Perfectly imperfect.\",\n },\n];\n\ntype Tile = { x: number; y: number; delay: number };\n\nfunction shuffle(list: T[]): T[] {\n const result = [...list];\n for (let i = result.length - 1; i > 0; i--) {\n const j = Math.floor(Math.random() * (i + 1));\n [result[i], result[j]] = [result[j], result[i]];\n }\n return result;\n}\n\n/**\n * Assigns every cell to one of `size` groups — exactly `size` cells each, in\n * random positions — then gives each group its own delay. Tiles vanish in\n * scattered clusters rather than row by row.\n */\nfunction buildTiles(size: number, revealStep: number): Tile[] {\n const groups: number[] = [];\n for (let g = 0; g < size; g++) for (let i = 0; i < size; i++) groups.push(g);\n const shuffled = shuffle(groups);\n\n const order = shuffle(Array.from({ length: size }, (_, k) => k));\n const delayOf = new Map();\n order.forEach((g, idx) => delayOf.set(g, idx * revealStep));\n\n const tiles: Tile[] = [];\n let i = 0;\n for (let y = 0; y < size; y++) {\n for (let x = 0; x < size; x++) {\n tiles.push({ x, y, delay: delayOf.get(shuffled[i++])! });\n }\n }\n return tiles;\n}\n\nconst EASE_OUT_QUART = [0.165, 0.84, 0.44, 1] as const;\nconst EASE_OUT_QUAD = [0.25, 0.46, 0.45, 0.94] as const;\n\n/** Per-word offset, so the line reads left to right as it resolves. */\nconst WORD_STAGGER_S = 0.02;\nconst WORD_DURATION_S = 0.2;\nconst HEADING_EXIT_S = 0.18;\n\nexport default function PixelDissolveCard({\n slides = DEFAULT_SLIDES,\n size = DEFAULT_SIZE,\n revealStep = DEFAULT_REVEAL_STEP,\n className = \"\",\n}: PixelDissolveCardProps) {\n const [index, setIndex] = useState(0);\n // The image currently dissolving away; null while idle.\n const [outgoing, setOutgoing] = useState<{\n image: string;\n tiles: Tile[];\n } | null>(null);\n const timer = useRef(null);\n const reduceMotion = useReducedMotion();\n\n useEffect(() => {\n return () => {\n if (timer.current !== null) window.clearTimeout(timer.current);\n };\n }, []);\n\n const next = useCallback(() => {\n if (outgoing) return; // ignore input mid-transition\n const from = slides[index];\n setIndex((i) => (i + 1) % slides.length);\n\n if (reduceMotion) return;\n\n setOutgoing({ image: from.image, tiles: buildTiles(size, revealStep) });\n timer.current = window.setTimeout(\n () => setOutgoing(null),\n (size * revealStep + SETTLE_S) * 1000,\n );\n }, [index, outgoing, reduceMotion, revealStep, size, slides]);\n\n const slide = slides[index];\n\n return (\n // `flex flex-col` overrides the button UA layout, which would otherwise\n // centre the contents vertically and float the image off the top edge.\n \n \n {/* Incoming image sits underneath and is revealed as tiles drop away. */}\n \n\n {outgoing && (\n \n {outgoing.tiles.map((t) => (\n \n ))}\n \n )}\n \n\n
\n \n \n {slide.heading.split(\" \").map((word, i) => (\n \n \n \n {word}\n \n {\" \"}\n \n ))}\n \n \n
\n \n );\n}\n", "type": "registry:component", "target": "~/components/craftui/blocks/pixel-dissolve-card/default.tsx" } ], "meta": { "displayName": "Pixel Dissolve Card - Pixel Dissolve Card", "description": "Clicking the card swaps the image underneath instantly, then dissolves the outgoing photo away as a size × size grid of tiles. Each tile is a background-position slice of the same image, and tiles are assigned to random groups so they vanish in scattered clusters instead of sweeping row by row.", "category": "card", "tags": [ "card", "image", "pixel", "dissolve", "click", "animation" ], "animationType": "click" } }