Micro-interactions

Sigil

An SVG crest that traces itself in when it scrolls into view, stroke by stroke.

Cook BookLine drawing Reveal Scroll reveal Enter / Exit Delay Duration Fill mode Stagger

Controls

duration1800 ms

delay0 ms

strokeWidth1.5

glow0.50

replayOnLeave

easing

strokeColor

#a855f7

Install

bun add clsx tailwind-merge

Then copy 2 files into your project:

components/registry/sigil/sigil.tsx
lib/utils.ts

Props

Prop	Type	Default	Description
duration	number	1800	Time for a single stroke to draw.
delay	number	0	Wait after entering view before the first stroke.
strokeWidth	number	1.5	Stroke width in viewBox units.
glow	number	0.5	Bloom trailing the stroke.
replayOnLeave	boolean	true	Re-arm on exit so the crest redraws on the way back.
easing	"ease-out" \| "linear" \| "ease-in-out" \| "dramatic"	"ease-out"	Curve the stroke advances on.
strokeColor	string (hex)	"#a855f7"	Amethyst stroke.

What It Demonstrates

Line drawing: An SVG path that draws itself in, like an invisible pen tracing it.
Reveal: Content is uncovered gradually, often by animating a clip-path or mask.
Scroll reveal: Elements fade or slide into place as they enter the viewport.
Enter / Exit: The animation an element plays when it's added to or removed from the screen.
Delay: Time before an animation starts.
Duration: How long an animation takes.
Fill mode: Whether an element keeps its first or last frame's styles before the animation starts or after it ends (e.g. forwards).
Stagger: Animate several items one after another with a small delay between each, creating a cascade.

Related Components

Appears In

"use client"; import { useEffect, useRef, useState } from "react"; import { cn } from "@/lib/utils"; export interface SigilProps { className?: string; paths?: string[]; viewBox?: string; duration?: number; delay?: number; strokeWidth?: number; glow?: number; replayOnLeave?: boolean; easing?: "ease-out" | "linear" | "ease-in-out" | "dramatic"; strokeColor?: string; reducedMotion?: boolean; } const CREST: string[] = [ "M 100 12 A 88 88 0 1 1 99.9 12", "M 100 12 L 100 42 M 100 158 L 100 188 M 12 100 L 42 100 M 158 100 L 188 100", "M 100 38 L 162 100 L 100 162 L 38 100 Z", "M 56 56 A 62 62 0 0 1 144 56", "M 100 66 A 34 34 0 1 1 99.9 66", "M 88 92 L 100 116 L 112 92 M 92 104 L 108 104", ]; const EASING: Record<NonNullable<SigilProps["easing"]>, string> = { "ease-out": "cubic-bezier(0.22, 1, 0.36, 1)", linear: "linear", "ease-in-out": "cubic-bezier(0.65, 0, 0.35, 1)", dramatic: "cubic-bezier(0.83, 0, 0.17, 1)", }; const SIGIL_CSS = ` @keyframes sg-sigil-draw { to { stroke-dashoffset: 0; } } @media (prefers-reduced-motion: reduce) { [data-sg-sigil] path { animation: none !important; stroke-dashoffset: 0 !important; } } `; export default function Sigil({ className, paths = CREST, viewBox = "0 0 200 200", duration = 1800, delay = 0, strokeWidth = 1.5, glow = 0.5, replayOnLeave = true, easing = "ease-out", strokeColor = "#a855f7", reducedMotion = false, }: SigilProps) { const rootRef = useRef<HTMLDivElement>(null); const [drawn, setDrawn] = useState(false); useEffect(() => { const el = rootRef.current; if (!el) return; const observer = new IntersectionObserver( ([hit]) => { if (hit?.isIntersecting) setDrawn(true); else if (replayOnLeave) setDrawn(false); }, { threshold: 0.25 }, ); observer.observe(el); return () => observer.disconnect(); }, [replayOnLeave]); const step = duration * 0.42; const still = reducedMotion || !drawn; return ( <div ref={rootRef} className={cn("relative", className)}> <style>{SIGIL_CSS}</style> <svg data-sg-sigil viewBox={viewBox} fill="none" aria-hidden className="h-full w-full overflow-visible" style={{ filter: glow > 0 && !reducedMotion ? `drop-shadow(0 0 ${(glow * 10).toFixed(1)}px ${strokeColor})` : undefined, }} > {paths.map((d, i) => ( <path key={d} d={d} pathLength={1} stroke={strokeColor} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round" strokeDasharray={1} strokeDashoffset={reducedMotion ? 0 : drawn ? undefined : 1} style={ still ? undefined : { strokeDashoffset: 1, animation: `sg-sigil-draw ${duration}ms ${EASING[easing]} ${delay + i * step}ms forwards`, } } /> ))} </svg> </div> ); }

Sigil

Controls

Install

Props

What It Demonstrates

Related Components

Blueprint Card

Stagger Menu

Dissolve

Corner Letters

Pixel Transition

Torchlight

Appears In

Controls