diff --git a/apps/docs/content/1.component/svg-draw.mdx b/apps/docs/content/1.component/svg-draw.mdx
index fa4346b..87e6bd2 100644
--- a/apps/docs/content/1.component/svg-draw.mdx
+++ b/apps/docs/content/1.component/svg-draw.mdx
@@ -6,11 +6,10 @@ icon: pen-tool
Wrap **any inline SVG**, an icon, a logo or a whole illustration, and it
**draws itself in**. Every path, line, circle, rect and polygon **traces its
-outline** one after another, longest first, then its **fill fades in** behind
-the line. Outline icons draw in their own stroke and keep it; filled shapes are
-traced in a thin line that fades away as they fill. Once a shape settles it is
-**handed back exactly as written**. It plays when the SVG scrolls into view, or
-on mount. Plain CSS transitions, no animation library.
+outline** one after another, then its **fill fades in** behind the line.
+Outline icons draw in their own stroke and keep it; filled shapes are traced in
+a thin line that fades away as they fill. It plays when the SVG scrolls into
+view, or on mount. GSAP DrawSVG and ScrollTrigger.
::component-preview{name="svg-draw" size="lg"}
::
@@ -66,43 +65,38 @@ pasted from a design tool, or a whole illustration. Tune the pace with
## Props
-| Prop | Type | Default | Description |
-| ------------ | -------------------------------------- | ---------------- | --------------------------------------------------------------------------- |
-| `duration` | `number` | `1.6` | Seconds each shape takes to draw. |
-| `delay` | `number` | `0` | Seconds before the first shape starts. |
-| `stagger` | `number` | `0.18` | Seconds between one shape starting and the next. |
-| `order` | `'longest' \| 'reverse' \| 'document'` | `'longest'` | Which shapes go first. |
-| `ease` | `SvgDrawEase \| string` | `'power1.out'` | A preset or any CSS easing. |
-| `width` | `number` | `1.5` | Trace width in screen px for fill-only shapes. |
-| `color` | `string` | `'currentColor'` | Trace color for fill-only shapes. |
-| `ownColor` | `boolean` | `false` | Trace fill-only shapes in their own fill color instead. |
-| `trigger` | `'view' \| 'mount'` | `'view'` | Play on scrolling into view, or straight away. |
-| `startAt` | `number` | `0.85` | With `view`: how far down the viewport the SVG's top must rise, `0` to `1`. |
-| `onComplete` | `() => void` | — | Called once every shape is drawn and settled. |
-
-The presets are `'power1.out'`, `'power2.out'`, `'power3.out'`, `'expo.out'`,
-`'in-out'` and `'linear'`. It renders a `
` around your SVG and extends
-native `
` attributes (`className`, `style`, …).
+| Prop | Type | Default | Description |
+| ------------ | ------------------- | ---------------- | ------------------------------------------------ |
+| `duration` | `number` | `1.4` | Seconds each shape takes to draw. |
+| `delay` | `number` | `0` | Seconds before the first shape starts. |
+| `stagger` | `number` | `0.12` | Seconds between one shape starting and the next. |
+| `ease` | `string` | `'power2.inOut'` | Any GSAP ease. |
+| `width` | `number` | `1.5` | Trace width in screen px for fill-only shapes. |
+| `trigger` | `'view' \| 'mount'` | `'view'` | Play on scrolling into view, or straight away. |
+| `start` | `string` | `'top 85%'` | ScrollTrigger start, with `trigger="view"`. |
+| `onComplete` | `() => void` | — | Called once every shape is drawn and filled. |
+
+The trace line takes the wrapper's text color, so set it with a `text-*`
+class. It renders a `
` around your SVG and extends native `
`
+attributes (`className`, `style`, …).
## Behavior
- **Any shape, any SVG.** It finds every `path`, `line`, `polyline`,
`polygon`, `circle`, `ellipse` and `rect`, however deeply nested in groups
or across several SVGs. Shapes inside `defs`, `clipPath`, `mask`,
- `pattern`, `marker`, `symbol` and gradients are skipped, because they are
- never painted where they sit, and so are hidden shapes.
+ `pattern`, `marker` and `symbol` are skipped, because they are never painted
+ where they sit.
- **Strokes stay strokes, fills stay fills.** A stroked shape draws in its own
stroke color and width and keeps them. A fill-only shape draws in a thin
- `color` line that fades out as its fill fades in. Colors are never swapped:
- every fill ends in its own color, gradients included.
-- **The same line on any scale.** `width` is in screen pixels, so the trace
- looks the same on a 24-unit icon and on a 1000-unit logo.
-- **Shapes that set `pathLength`** are measured in their own units, so the
- line still runs exactly from start to end.
-- **Handed back untouched.** Once a shape has settled, its own `style`
- attribute is put back exactly as it was, so nothing lingers to fight your
- CSS. Unmounting mid-draw, a prop change or React Strict Mode's double effect
- restores the SVG too, so it is always measured as written.
+ line in the text color that fades out as its fill fades in. Every fill ends
+ in its own color and opacity, gradients included.
+- **The same line on any scale.** The trace uses a non-scaling stroke, so
+ `width` looks the same on a 24-unit icon and on a 1000-unit logo.
+- **Measured by DrawSVG.** Path lengths, `pathLength` attributes and line
+ caps are all handled by GSAP's DrawSVG plugin.
+- **Cleans up after itself.** The timeline runs inside `useGSAP`, so
+ unmounting or changing a prop reverts every shape to how it was written.
- **No flash.** Where scripts run, the SVG is hidden until its first frame is
set up, before paint. Without JavaScript it simply shows.
- **Only inline SVG.** An `` or a CSS background cannot be
diff --git a/apps/docs/content/2.block/arc-carousel.mdx b/apps/docs/content/2.block/arc-carousel.mdx
index f549b47..008c956 100644
--- a/apps/docs/content/2.block/arc-carousel.mdx
+++ b/apps/docs/content/2.block/arc-carousel.mdx
@@ -9,10 +9,9 @@ downward arc**, each one further from the centre sitting a little lower and
**turned a little more**, three to a side. **Step** and the whole arc swings
round: every card glides to its neighbour's slot on a slow, weighted curve,
while the one arriving in the middle **eases up in size** and takes a **lime
-outline**. A card that wraps past the edge **keeps travelling off-screen**
-while it comes back in **from the far side**, so the loop never snaps.
-**Swipe**, **drag**, use the **arrow keys**, or **click a side card** to bring
-it to the centre. Plain CSS transitions, no animation library.
+outline**. Cards fade out past the third slot and wrap round unseen, so the
+loop never snaps. **Swipe**, **drag**, use the **arrow keys**, or **click a
+side card** to bring it to the centre. GSAP with ScrollTrigger.
::component-preview{name="arc-carousel" size="xl"}
::
@@ -50,8 +49,8 @@ export default function Page() {
:::
::
-It ships with eight sample projects. Pass your own as `items`, and point the
-button wherever the full list lives:
+It ships with eight sample projects. Pass your own as `items`, and put your
+own heading above it:
```tsx [app/page.tsx]
import ArcCarousel from '@/components/tweenui/arc-carousel';
@@ -59,10 +58,7 @@ import ArcCarousel from '@/components/tweenui/arc-carousel';
export default function Page() {
return (
\n );\n}"
+ "content": "import ArcCarousel from '@/components/tweenui/arc-carousel';\n\nexport default function Page() {\n return (\n \n );\n}"
},
{
"path": "examples/arc-carousel-demo-3.tsx",
diff --git a/apps/docs/public/r/arc-carousel.json b/apps/docs/public/r/arc-carousel.json
index 57e815e..2b5611e 100644
--- a/apps/docs/public/r/arc-carousel.json
+++ b/apps/docs/public/r/arc-carousel.json
@@ -3,26 +3,22 @@
"name": "arc-carousel",
"type": "registry:block",
"title": "Arc Carousel",
- "description": "A showcase carousel whose cards hang on a downward arc, each one further out turned a little more. Stepping swings the whole arc round, the centre card easing up in size under a lime outline, and a card that wraps past the edge keeps travelling off-screen while it comes back in from the far side. Swipe, drag, the arrow keys or a click on a side card all step it.",
- "dependencies": [],
+ "description": "A showcase carousel whose cards hang on a downward arc, each one further out turned a little more. Stepping swings the whole arc round, the centre card easing up in size under a lime outline; cards fade out past the third slot and wrap round unseen. Swipe, drag, the arrow keys or a click on a side card all step it, and it autoplays with a pause button. GSAP with ScrollTrigger.",
+ "dependencies": [
+ "gsap",
+ "@gsap/react"
+ ],
"registryDependencies": [],
"cssVars": {
- "theme": {
- "color-tween-teal": "#045f64",
- "color-tween-teal-soft": "#9fd4d6",
- "color-tween-lime": "#c6f56f",
- "color-tween-ink": "#071d1b",
- "color-tween-ink-deep": "#03110f",
- "ease-tween": "cubic-bezier(0.32, 0.72, 0, 1)"
- }
+ "theme": {}
},
"files": [
{
"path": "components/tweenui/arc-carousel.tsx",
"type": "registry:component",
"target": "components/tweenui/arc-carousel.tsx",
- "content": "'use client';\n\nimport {\n useCallback,\n useEffect,\n useId,\n useLayoutEffect,\n useRef,\n useState,\n type ComponentPropsWithoutRef,\n type KeyboardEvent,\n type MouseEvent,\n} from 'react';\nimport { cn } from '@/lib/utils';\n\nconst prefersReducedMotion = () =>\n typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\nconst useIsomorphicLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;\n\nexport interface ArcCarouselItem {\n title: string;\n image: string;\n /** Chip on the top left of the card. */\n tag?: string;\n /** Line under the title, e.g. a client and year or a price. */\n meta?: string;\n href?: string;\n}\n\nexport interface ArcCarouselProps extends ComponentPropsWithoutRef<'section'> {\n items?: ArcCarouselItem[];\n badge?: string;\n title?: string;\n description?: string;\n cta?: { label: string; href: string } | null;\n /** Step on its own; holds on hover, keyboard focus and while off-screen. */\n autoplay?: boolean;\n /** Time each card holds the centre while autoplaying, in ms. */\n interval?: number;\n}\n\n// Card position by distance from the centre: px across, px down, degrees of turn\nconst SLOTS = [\n { x: 0, y: 0, r: 0 },\n { x: 359, y: 26, r: 8.77 },\n { x: 711, y: 113, r: 18.83 },\n { x: 1033, y: 243, r: 25.05 },\n];\nconst ACTIVE_SCALE = 1.05;\nconst ART = 'transform 470ms cubic-bezier(0.42, 1, 0.46, 1)';\nconst MOVE = 'transform 800ms cubic-bezier(0.98, 0.30, 0.30, 1), opacity 400ms ease';\nconst SWIPE = 50;\nconst GHOST_LIFE = 850;\n// Caps one frame of autoplay, so a backgrounded tab never skips ahead\nconst MAX_FRAME = 100;\n\nconst slot = (offset: number) => {\n const t = Math.abs(offset);\n const sign = Math.sign(offset);\n const last = SLOTS.length - 1;\n let p = SLOTS[Math.min(t, last)];\n if (t > last) {\n const prev = SLOTS[last - 1];\n const n = t - last;\n p = { x: p.x + (p.x - prev.x) * n, y: p.y + (p.y - prev.y) * n, r: p.r + (p.r - prev.r) * n };\n }\n return {\n transform: `translate(${p.x * sign}px, ${p.y}px) rotate(${p.r * sign}deg)`,\n opacity: t <= last ? '1' : '0',\n zIndex: String(100 - t),\n };\n};\n\n// Signed distance from the centre, the shortest way round\nconst offsetOf = (index: number, position: number, count: number) => {\n let r = (((index - position) % count) + count) % count;\n if (r > Math.floor(count / 2)) r -= count;\n return r;\n};\n\nconst wrap = (position: number, count: number) => ((position % count) + count) % count;\nconst pad2 = (n: number) => String(n).padStart(2, '0');\n\nconst photo = (id: string, width = 640) =>\n `https://images.unsplash.com/photo-${id}?w=${width}&h=${Math.round(width * (430 / 312))}&fit=crop&q=80&auto=format`;\nconst srcSetOf = (src: string) =>\n src.includes('images.unsplash.com')\n ? `${src.replace(/([?&])w=\\d+&h=\\d+/, '$1w=320&h=441')} 1x, ${src} 2x`\n : undefined;\n\nconst DEFAULT_ITEMS: ArcCarouselItem[] = [\n {\n title: 'Nightfall',\n tag: 'Astronomy app',\n meta: 'Stellar Co. · 2026',\n image: photo('1519681393784-d120267933ba'),\n },\n {\n title: 'Chroma Identity',\n tag: 'Brand identity',\n meta: 'Chroma Studio · 2026',\n image: photo('1541701494587-cb58502866ab'),\n },\n {\n title: 'Alpine Lodge',\n tag: 'Hospitality',\n meta: 'Moraine Hotels · 2026',\n image: photo('1493246507139-91e8fad9978e'),\n },\n {\n title: 'Metro Pulse',\n tag: 'Data visualisation',\n meta: 'City of Lakes · 2025',\n image: photo('1477959858617-67f85cf4f1df'),\n },\n {\n title: 'Orbit Motion',\n tag: '3D & motion',\n meta: 'Orbit Labs · 2025',\n image: photo('1618005198919-d3d4b5a92ead'),\n },\n {\n title: 'Open Road',\n tag: 'Campaign film',\n meta: 'Westward · 2025',\n image: photo('1500530855697-b586d89ba3ee'),\n },\n {\n title: 'Still Water',\n tag: 'Wellness app',\n meta: 'Calm Harbor · 2024',\n image: photo('1534447677768-be436bb09401'),\n },\n {\n title: 'Lago Retreats',\n tag: 'Travel platform',\n meta: 'Lago Travel · 2024',\n image: photo('1501785888041-af3ef285b470'),\n },\n];\n\nconst STEP = cn(\n 'grid size-11 place-items-center rounded-full border border-tween-teal-soft/25 text-white',\n 'transition-[background-color,border-color,color] duration-300 ease-tween hover:border-tween-lime hover:bg-tween-lime hover:text-tween-ink-deep',\n 'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tween-lime motion-reduce:transition-none'\n);\nconst FADE =\n 'pointer-events-none absolute inset-y-0 z-2 w-[clamp(2.5rem,14cqw,12rem)] from-tween-ink-deep via-tween-ink-deep/70 to-transparent';\n\nconst Caret = ({ flip }: { flip?: boolean }) => (\n \n \n \n);\n\nconst PauseIcon = () => (\n \n);\n\nconst PlayIcon = () => (\n \n);\n\nconst ArrowUpRight = ({ className }: { className?: string }) => (\n \n \n \n);\n\nconst ArcCarousel = ({\n items = DEFAULT_ITEMS,\n badge = 'Featured work',\n title = 'Projects we shipped this season.',\n description = 'A rotating look at recent launches across brand, product and research. Swipe, drag or use the arrows to browse.',\n cta = { label: 'View all projects', href: '#' },\n autoplay = true,\n interval = 5000,\n className,\n ...props\n}: ArcCarouselProps) => {\n const count = items.length;\n const [position, setPosition] = useState(0);\n const [playing, setPlaying] = useState(autoplay);\n const [held, setHeld] = useState(false);\n const rootRef = useRef(null);\n const ghostsRef = useRef(null);\n const ringRef = useRef(null);\n const itemRefs = useRef<(HTMLDivElement | null)[]>([]);\n const artRefs = useRef<(HTMLDivElement | null)[]>([]);\n const layout = useRef({ last: 0, offsets: [] as (number | undefined)[], ghosts: [] as number[] });\n const swipe = useRef({ tracking: false, swiped: false, x: 0, y: 0 });\n const holds = useRef({ hover: false, focus: false, offscreen: false });\n const progress = useRef(0);\n const titleId = useId();\n const descriptionId = useId();\n\n // `playing` is the viewer's choice; a hold is a pause they did not ask for\n const hold = useCallback((key: keyof typeof holds.current, on: boolean) => {\n holds.current[key] = on;\n setHeld(Object.values(holds.current).some(Boolean));\n }, []);\n\n const place = (item: HTMLElement, offset: number) => {\n const s = slot(offset);\n item.style.transform = s.transform;\n item.style.opacity = s.opacity;\n item.style.zIndex = s.zIndex;\n item.style.pointerEvents = s.opacity === '1' ? '' : 'none';\n };\n\n useIsomorphicLayoutEffect(() => {\n const ghosts = ghostsRef.current;\n if (!ghosts || !count) return;\n const reduced = prefersReducedMotion();\n const move = reduced ? 'opacity 0.3s ease' : MOVE;\n const art = reduced ? 'none' : ART;\n const st = layout.current;\n const animate = st.offsets.length > 0;\n const delta = animate ? position - st.last : 0;\n st.last = position;\n\n itemRefs.current.forEach((item, i) => {\n if (!item) return;\n const next = offsetOf(i, position, count);\n const prev = st.offsets[i];\n\n const scaleEl = artRefs.current[i];\n if (scaleEl) {\n const scale = next === 0 && !reduced ? `scale(${ACTIVE_SCALE})` : 'scale(1)';\n scaleEl.style.transition = animate ? art : 'none';\n scaleEl.style.transform = scale;\n if (!animate) {\n void scaleEl.offsetWidth;\n scaleEl.style.transition = art;\n }\n }\n\n if (!animate || prev === undefined) {\n item.style.transition = 'none';\n place(item, next);\n } else if (prev - delta !== next) {\n // Wrapped round: a copy carries on off this edge while the card enters from the other\n const last = SLOTS.length - 1;\n const entry = delta > 0 ? Math.max(next + 1, last + 1) : Math.min(next - 1, -(last + 1));\n const ghost = item.cloneNode(true) as HTMLElement;\n ghost.setAttribute('aria-hidden', 'true');\n ghost.inert = true;\n ghost.style.pointerEvents = 'none';\n ghost.style.transition = 'none';\n ghosts.appendChild(ghost);\n const out = slot(prev - delta);\n void ghost.offsetWidth;\n ghost.style.transition = move;\n ghost.style.transform = out.transform;\n ghost.style.opacity = '0';\n st.ghosts.push(window.setTimeout(() => ghost.remove(), GHOST_LIFE));\n\n item.style.transition = 'none';\n place(item, entry);\n item.style.opacity = '0';\n void item.offsetWidth;\n item.style.transition = move;\n place(item, next);\n } else {\n item.style.transition = move;\n place(item, next);\n }\n st.offsets[i] = next;\n });\n }, [position, count]);\n\n useEffect(() => {\n const { ghosts } = layout.current;\n return () => ghosts.forEach((id) => window.clearTimeout(id));\n }, []);\n\n const step = useCallback((direction: number) => setPosition((p) => p + direction), []);\n\n // The media query is client-only, so reduced motion applies after hydration\n useEffect(() => {\n setPlaying(autoplay && !prefersReducedMotion());\n }, [autoplay]);\n\n useEffect(() => {\n progress.current = 0;\n ringRef.current?.style.setProperty('stroke-dashoffset', '1');\n }, [position, playing]);\n\n useEffect(() => {\n if (!playing || held || count < 2) return;\n let frame = 0;\n let last = performance.now();\n const tick = (now: number) => {\n progress.current += Math.min(now - last, MAX_FRAME) / interval;\n last = now;\n if (progress.current >= 1) {\n progress.current = 0;\n step(1);\n }\n ringRef.current?.style.setProperty('stroke-dashoffset', String(1 - progress.current));\n frame = requestAnimationFrame(tick);\n };\n frame = requestAnimationFrame(tick);\n return () => cancelAnimationFrame(frame);\n }, [playing, held, interval, count, step]);\n\n useEffect(() => {\n const root = rootRef.current;\n if (!autoplay || !root || typeof IntersectionObserver === 'undefined') return;\n const observer = new IntersectionObserver(([entry]) =>\n hold('offscreen', !entry.isIntersecting)\n );\n observer.observe(root);\n return () => observer.disconnect();\n }, [autoplay, hold]);\n\n // A swipe can end outside the list\n useEffect(() => {\n const onUp = (event: PointerEvent) => {\n const s = swipe.current;\n if (!s.tracking) return;\n s.tracking = false;\n const dx = event.clientX - s.x;\n const dy = event.clientY - s.y;\n if (Math.abs(dx) > SWIPE && Math.abs(dx) > Math.abs(dy)) {\n s.swiped = true;\n step(dx < 0 ? 1 : -1);\n }\n };\n const onCancel = () => {\n swipe.current.tracking = false;\n };\n window.addEventListener('pointerup', onUp);\n window.addEventListener('pointercancel', onCancel);\n return () => {\n window.removeEventListener('pointerup', onUp);\n window.removeEventListener('pointercancel', onCancel);\n };\n }, [step]);\n\n // After a swipe, or on a side card, a click steps the arc instead of following the card's link\n const onClickCapture = (event: MouseEvent) => {\n const s = swipe.current;\n if (s.swiped) {\n s.swiped = false;\n event.preventDefault();\n event.stopPropagation();\n return;\n }\n if (event.detail === 0) return;\n const index = itemRefs.current.findIndex((item) => item?.contains(event.target as Node));\n if (index < 0) return;\n const offset = offsetOf(index, position, count);\n if (offset !== 0) {\n event.preventDefault();\n event.stopPropagation();\n step(Math.sign(offset));\n }\n };\n\n const onKeyDown = (event: KeyboardEvent) => {\n if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') return;\n event.preventDefault();\n step(event.key === 'ArrowRight' ? 1 : -1);\n };\n\n const current = count ? wrap(position, count) : 0;\n const active = items[current];\n\n return (\n \n \n\n \n {badge && (\n \n \n {badge}\n \n )}\n \n {title}\n \n {description && (\n \n {description}\n \n )}\n \n\n {/* Isolated, so the cards' z-indexes stay under the edge fades */}\n event.pointerType !== 'touch' && hold('hover', true)}\n onPointerLeave={() => hold('hover', false)}\n >\n
\n\n \n \n \n );\n};\n\nexport default ArcCarousel;\n"
}
],
- "docs": "Docs, props and examples: https://tween-ui.vercel.app/block/arc-carousel\nThe sample content loads images from images.unsplash.com. Replace them with your own before shipping.\nColors come from the Tween UI theme tokens (`tween-ink-deep`, `tween-lime`, …), which the CLI adds to your `@theme`. Pass your own `items`; seven or more keep the arc full, since three cards show on each side of the centre."
+ "docs": "Docs, props and examples: https://tween-ui.vercel.app/block/arc-carousel\nGSAP plugins (CustomEase, ScrollTrigger) are registered inside the component, so there is nothing to set up.\nThe sample content loads images from images.unsplash.com. Replace them with your own before shipping.\nPass your own `items`; eight or more keep the arc full and the wrap unseen. Colors are inline Tailwind classes, so there is nothing to add to your theme."
}
\ No newline at end of file
diff --git a/apps/docs/public/r/registry.json b/apps/docs/public/r/registry.json
index fd4f07d..e494ddf 100644
--- a/apps/docs/public/r/registry.json
+++ b/apps/docs/public/r/registry.json
@@ -563,7 +563,7 @@
"name": "svg-draw",
"type": "registry:ui",
"title": "SVG Draw",
- "description": "Wrap any inline SVG and it draws itself in: every path, line, circle, rect and polygon traces its outline, one after another, then its fill fades in. Outline icons draw in their own stroke, filled logos are traced and then filled, and the SVG is handed back exactly as written once it settles. Plays when it scrolls into view or on mount; plain CSS transitions, no animation library.",
+ "description": "Wrap any inline SVG and it draws itself in: every path, line, circle, rect and polygon traces its outline, one after another, then its fill fades in. Outline icons draw in their own stroke, filled logos are traced in a thin line that fades as they fill. Plays when it scrolls into view or on mount. GSAP DrawSVG and ScrollTrigger.",
"files": [
{
"path": "components/tweenui/svg-draw.tsx",
@@ -1527,7 +1527,7 @@
"name": "arc-carousel",
"type": "registry:block",
"title": "Arc Carousel",
- "description": "A showcase carousel whose cards hang on a downward arc, each one further out turned a little more. Stepping swings the whole arc round, the centre card easing up in size under a lime outline, and a card that wraps past the edge keeps travelling off-screen while it comes back in from the far side. Swipe, drag, the arrow keys or a click on a side card all step it.",
+ "description": "A showcase carousel whose cards hang on a downward arc, each one further out turned a little more. Stepping swings the whole arc round, the centre card easing up in size under a lime outline; cards fade out past the third slot and wrap round unseen. Swipe, drag, the arrow keys or a click on a side card all step it, and it autoplays with a pause button. GSAP with ScrollTrigger.",
"files": [
{
"path": "components/tweenui/arc-carousel.tsx",
diff --git a/apps/docs/public/r/svg-draw.json b/apps/docs/public/r/svg-draw.json
index e2e26f2..5ab7b3f 100644
--- a/apps/docs/public/r/svg-draw.json
+++ b/apps/docs/public/r/svg-draw.json
@@ -3,8 +3,11 @@
"name": "svg-draw",
"type": "registry:ui",
"title": "SVG Draw",
- "description": "Wrap any inline SVG and it draws itself in: every path, line, circle, rect and polygon traces its outline, one after another, then its fill fades in. Outline icons draw in their own stroke, filled logos are traced and then filled, and the SVG is handed back exactly as written once it settles. Plays when it scrolls into view or on mount; plain CSS transitions, no animation library.",
- "dependencies": [],
+ "description": "Wrap any inline SVG and it draws itself in: every path, line, circle, rect and polygon traces its outline, one after another, then its fill fades in. Outline icons draw in their own stroke, filled logos are traced in a thin line that fades as they fill. Plays when it scrolls into view or on mount. GSAP DrawSVG and ScrollTrigger.",
+ "dependencies": [
+ "gsap",
+ "@gsap/react"
+ ],
"registryDependencies": [],
"cssVars": {
"theme": {}
@@ -14,8 +17,8 @@
"path": "components/tweenui/svg-draw.tsx",
"type": "registry:component",
"target": "components/tweenui/svg-draw.tsx",
- "content": "'use client';\n\nimport { useEffect, useLayoutEffect, useRef, type ComponentPropsWithoutRef } from 'react';\nimport { cn } from '@/lib/utils';\n\nconst prefersReducedMotion = () =>\n typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\nconst useIsomorphicLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;\n\nexport const SVG_DRAW_EASES = {\n 'power1.out': 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',\n 'power2.out': 'cubic-bezier(0.22, 0.61, 0.36, 1)',\n 'power3.out': 'cubic-bezier(0.16, 1, 0.3, 1)',\n 'expo.out': 'cubic-bezier(0.19, 1, 0.22, 1)',\n 'in-out': 'cubic-bezier(0.65, 0, 0.35, 1)',\n linear: 'linear',\n} as const;\n\nexport type SvgDrawEase = keyof typeof SVG_DRAW_EASES;\n\nconst FADE_MS = 400;\nconst SHAPES = new Set(['path', 'line', 'polyline', 'polygon', 'circle', 'ellipse', 'rect']);\n// Shapes inside these are never painted where they sit, so there is nothing to draw\nconst SKIP = new Set([\n 'defs',\n 'clippath',\n 'mask',\n 'pattern',\n 'marker',\n 'symbol',\n 'lineargradient',\n 'radialgradient',\n 'filter',\n 'foreignobject',\n]);\n\nconst shapesIn = (node: Element): SVGGeometryElement[] =>\n Array.from(node.children).flatMap((child) => {\n const tag = child.tagName.toLowerCase();\n if (SKIP.has(tag)) return [];\n return SHAPES.has(tag) ? [child as SVGGeometryElement] : shapesIn(child);\n });\n\nconst isClear = (paint: string) =>\n paint === 'none' || paint === 'transparent' || paint === 'rgba(0, 0, 0, 0)';\n\ninterface Shape {\n el: SVGGeometryElement;\n len: number;\n pad: number;\n stroked: boolean;\n trace: string;\n traceWidth: string;\n fillOpacity: string;\n inline: string | null;\n}\n\nconst measure = (el: SVGGeometryElement, width: number, color: string, ownColor: boolean) => {\n const style = getComputedStyle(el);\n if (style.display === 'none' || style.visibility === 'hidden') return null;\n\n let real = 0;\n try {\n real = el.getTotalLength();\n } catch {\n return null;\n }\n // A `pathLength` attribute changes the units the dash is measured in\n const own = parseFloat(el.getAttribute('pathLength') ?? '');\n const len = own > 0 ? own : real;\n if (!(real > 0)) return null;\n\n // Unset paint computes to the SVG defaults: a black fill and no stroke\n const fill = style.fill || 'rgb(0, 0, 0)';\n const stroke = style.stroke || 'none';\n const strokeWidth = parseFloat(style.strokeWidth || '1');\n const stroked = !isClear(stroke) && strokeWidth > 0;\n if (!stroked && isClear(fill)) return null;\n\n // `width` is in screen px, the stroke in the shape's own units\n const ctm = el.getScreenCTM?.();\n const scale = ctm ? Math.sqrt(Math.abs(ctm.a * ctm.d - ctm.b * ctm.c)) || 1 : 1;\n const traceWidth = stroked ? strokeWidth : width / scale;\n\n return {\n el,\n len,\n // Run the dash past the end, so a line cap never shows as a dot before it starts\n pad: (traceWidth + 1) * (len / real),\n stroked,\n trace: stroked ? stroke : ownColor ? fill : color,\n traceWidth: String(traceWidth),\n fillOpacity: style.fillOpacity || '1',\n inline: el.getAttribute('style'),\n } satisfies Shape;\n};\n\nconst restore = ({ el, inline }: Shape) => {\n if (inline === null) el.removeAttribute('style');\n else el.setAttribute('style', inline);\n};\n\nexport interface SvgDrawProps extends ComponentPropsWithoutRef<'div'> {\n /** Seconds each shape takes to draw. */\n duration?: number;\n /** Seconds before the first shape starts. */\n delay?: number;\n /** Seconds between one shape starting and the next. */\n stagger?: number;\n /** Trace width in screen px for fill-only shapes. Stroked shapes keep their own. */\n width?: number;\n ease?: SvgDrawEase | (string & {});\n order?: 'longest' | 'reverse' | 'document';\n /** Trace color for fill-only shapes. Stroked shapes keep their own. */\n color?: string;\n /** Trace fill-only shapes in their own fill color. */\n ownColor?: boolean;\n trigger?: 'view' | 'mount';\n /** With `trigger=\"view\"`, how far down the viewport the SVG's top must rise, 0 to 1. */\n startAt?: number;\n onComplete?: () => void;\n}\n\nconst SvgDraw = ({\n duration = 1.6,\n delay = 0,\n stagger = 0.18,\n width = 1.5,\n ease = 'power1.out',\n order = 'longest',\n color = 'currentColor',\n ownColor = false,\n trigger = 'view',\n startAt = 0.85,\n onComplete,\n className,\n children,\n ...props\n}: SvgDrawProps) => {\n const rootRef = useRef(null);\n const onCompleteRef = useRef(onComplete);\n\n useEffect(() => {\n onCompleteRef.current = onComplete;\n }, [onComplete]);\n\n // Before paint, so the finished drawing never flashes up first\n useIsomorphicLayoutEffect(() => {\n const root = rootRef.current;\n if (!root) return;\n const reveal = () => {\n root.style.visibility = 'visible';\n };\n if (prefersReducedMotion() || root.getClientRects().length === 0) return reveal();\n\n const shapes = shapesIn(root)\n .map((el) => measure(el, width, color, ownColor))\n .filter((shape): shape is Shape => shape !== null);\n if (!shapes.length) return reveal();\n if (order === 'longest') shapes.sort((a, b) => b.len - a.len);\n else if (order === 'reverse') shapes.reverse();\n\n shapes.forEach(({ el, len, pad, stroked, trace, traceWidth }) => {\n Object.assign(el.style, {\n transition: 'none',\n fillOpacity: '0',\n stroke: trace,\n strokeWidth: traceWidth,\n strokeDasharray: `${len} ${len + pad * 2}`,\n strokeDashoffset: String(len + pad),\n ...(stroked ? {} : { strokeLinecap: 'round', strokeLinejoin: 'round' }),\n });\n });\n reveal();\n\n const ms = Math.max(0.01, duration) * 1000;\n const start = Math.max(0, delay) * 1000;\n const gap = Math.max(0, stagger) * 1000;\n const curve = SVG_DRAW_EASES[ease as SvgDrawEase] ?? ease;\n const timers: number[] = [];\n\n const play = () => {\n void root.getBoundingClientRect();\n shapes.forEach((shape, i) => {\n const wait = start + i * gap;\n shape.el.style.transition = `stroke-dashoffset ${ms}ms ${curve} ${wait}ms`;\n shape.el.style.strokeDashoffset = '0';\n\n timers.push(\n window.setTimeout(() => {\n shape.el.style.transition = `fill-opacity ${FADE_MS}ms ease, stroke-opacity ${FADE_MS}ms ease`;\n shape.el.style.fillOpacity = shape.fillOpacity;\n if (!shape.stroked) shape.el.style.strokeOpacity = '0';\n }, wait + ms),\n window.setTimeout(() => restore(shape), wait + ms + FADE_MS)\n );\n });\n const end = start + (shapes.length - 1) * gap + ms + FADE_MS;\n timers.push(window.setTimeout(() => onCompleteRef.current?.(), end));\n };\n\n let observer: IntersectionObserver | undefined;\n if (trigger === 'view' && typeof IntersectionObserver !== 'undefined') {\n const margin = Math.round((1 - Math.min(1, Math.max(0, startAt))) * 100);\n observer = new IntersectionObserver(\n ([entry]) => {\n if (!entry.isIntersecting) return;\n observer?.disconnect();\n play();\n },\n { rootMargin: `0px 0px -${margin}% 0px` }\n );\n observer.observe(root);\n } else {\n play();\n }\n\n // Hand the SVG back as written, so a re-run measures the real thing\n return () => {\n observer?.disconnect();\n timers.forEach((id) => window.clearTimeout(id));\n shapes.forEach(restore);\n };\n }, [duration, delay, stagger, width, ease, order, color, ownColor, trigger, startAt]);\n\n return (\n \n {children}\n \n );\n};\n\nexport default SvgDraw;\n"
+ "content": "'use client';\n\nimport { useEffect, useRef, type ComponentPropsWithoutRef } from 'react';\nimport { useGSAP } from '@gsap/react';\nimport gsap from 'gsap';\nimport { DrawSVGPlugin } from 'gsap/DrawSVGPlugin';\nimport { ScrollTrigger } from 'gsap/ScrollTrigger';\nimport { cn } from '@/lib/utils';\n\ngsap.registerPlugin(useGSAP, DrawSVGPlugin, ScrollTrigger);\n\nconst prefersReducedMotion = () =>\n typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\nconst SHAPES = 'path, line, polyline, polygon, circle, ellipse, rect';\n// Shapes inside these are never painted where they sit\nconst UNPAINTED = 'defs, clipPath, mask, pattern, marker, symbol';\nconst NO_PAINT = new Set(['none', 'transparent', 'rgba(0, 0, 0, 0)']);\nconst FILL_FADE = 0.5;\n\nexport interface SvgDrawProps extends ComponentPropsWithoutRef<'div'> {\n /** Seconds each shape takes to draw. */\n duration?: number;\n delay?: number;\n /** Seconds between one shape starting and the next. */\n stagger?: number;\n /** Any GSAP ease. */\n ease?: string;\n /** Width in screen px of the line that traces a fill-only shape. */\n width?: number;\n trigger?: 'view' | 'mount';\n /** ScrollTrigger start, with `trigger=\"view\"`. */\n start?: string;\n onComplete?: () => void;\n}\n\nconst SvgDraw = ({\n duration = 1.4,\n delay = 0,\n stagger = 0.12,\n ease = 'power2.inOut',\n width = 1.5,\n trigger = 'view',\n start = 'top 85%',\n onComplete,\n className,\n children,\n ...props\n}: SvgDrawProps) => {\n const rootRef = useRef(null);\n const onCompleteRef = useRef(onComplete);\n\n useEffect(() => {\n onCompleteRef.current = onComplete;\n }, [onComplete]);\n\n useGSAP(\n () => {\n const root = rootRef.current;\n if (!root) return;\n gsap.set(root, { visibility: 'visible' });\n if (prefersReducedMotion()) return;\n\n const shapes = gsap.utils\n .toArray(root.querySelectorAll(SHAPES))\n .filter((shape) => !shape.closest(UNPAINTED));\n if (!shapes.length) return;\n\n const painted = (shape: Element, paint: 'fill' | 'stroke') =>\n !NO_PAINT.has(getComputedStyle(shape)[paint]);\n const filled = shapes.filter((shape) => painted(shape, 'fill'));\n // Fill-only shapes get a thin line to draw with, which fades once they fill\n const traced = filled.filter((shape) => !painted(shape, 'stroke'));\n gsap.set(traced, {\n stroke: 'currentColor',\n strokeWidth: width,\n vectorEffect: 'non-scaling-stroke',\n });\n\n gsap\n .timeline({\n delay,\n scrollTrigger: trigger === 'view' ? { trigger: root, start, once: true } : undefined,\n onComplete: () => onCompleteRef.current?.(),\n })\n .from(shapes, { drawSVG: 0, duration, ease, stagger })\n .from(filled, { fillOpacity: 0, duration: FILL_FADE, stagger }, duration * 0.6)\n .to(traced, { strokeOpacity: 0, duration: FILL_FADE, stagger }, '<');\n },\n {\n scope: rootRef,\n dependencies: [duration, delay, stagger, ease, width, trigger, start],\n revertOnUpdate: true,\n }\n );\n\n return (\n \n {children}\n \n );\n};\n\nexport default SvgDraw;\n"
}
],
- "docs": "Docs, props and examples: https://tween-ui.vercel.app/component/svg-draw\nWrap inline SVG markup, not an : only shapes in the page DOM can be traced. Give it a new key to play it again."
+ "docs": "Docs, props and examples: https://tween-ui.vercel.app/component/svg-draw\nGSAP plugins (DrawSVGPlugin, ScrollTrigger) are registered inside the component, so there is nothing to set up.\nWrap inline SVG markup, not an : only shapes in the page DOM can be traced. Give it a new key to play it again."
}
\ No newline at end of file
diff --git a/apps/docs/registry/__sources__.generated.ts b/apps/docs/registry/__sources__.generated.ts
index b36efdd..e0a2a81 100644
--- a/apps/docs/registry/__sources__.generated.ts
+++ b/apps/docs/registry/__sources__.generated.ts
@@ -4,12 +4,7 @@ export interface Snippet {
codeHtml: string;
}
-export const cssTokens: Record = {
- "arc-carousel": {
- "code": "@theme {\n --color-tween-teal: #045f64;\n --color-tween-teal-soft: #9fd4d6;\n --color-tween-lime: #c6f56f;\n --color-tween-ink: #071d1b;\n --color-tween-ink-deep: #03110f;\n --ease-tween: cubic-bezier(0.32, 0.72, 0, 1);\n}",
- "codeHtml": "
` or a CSS background cannot be
diff --git a/apps/docs/content/2.block/arc-carousel.mdx b/apps/docs/content/2.block/arc-carousel.mdx
index f549b47..008c956 100644
--- a/apps/docs/content/2.block/arc-carousel.mdx
+++ b/apps/docs/content/2.block/arc-carousel.mdx
@@ -9,10 +9,9 @@ downward arc**, each one further from the centre sitting a little lower and
**turned a little more**, three to a side. **Step** and the whole arc swings
round: every card glides to its neighbour's slot on a slow, weighted curve,
while the one arriving in the middle **eases up in size** and takes a **lime
-outline**. A card that wraps past the edge **keeps travelling off-screen**
-while it comes back in **from the far side**, so the loop never snaps.
-**Swipe**, **drag**, use the **arrow keys**, or **click a side card** to bring
-it to the centre. Plain CSS transitions, no animation library.
+outline**. Cards fade out past the third slot and wrap round unseen, so the
+loop never snaps. **Swipe**, **drag**, use the **arrow keys**, or **click a
+side card** to bring it to the centre. GSAP with ScrollTrigger.
::component-preview{name="arc-carousel" size="xl"}
::
@@ -50,8 +49,8 @@ export default function Page() {
:::
::
-It ships with eight sample projects. Pass your own as `items`, and point the
-button wherever the full list lives:
+It ships with eight sample projects. Pass your own as `items`, and put your
+own heading above it:
```tsx [app/page.tsx]
import ArcCarousel from '@/components/tweenui/arc-carousel';
@@ -59,10 +58,7 @@ import ArcCarousel from '@/components/tweenui/arc-carousel';
export default function Page() {
return (
![](\"*.svg\")
: only shapes in the page DOM can be traced. Give it a new key to play it again."
+ "docs": "Docs, props and examples: https://tween-ui.vercel.app/component/svg-draw\nGSAP plugins (DrawSVGPlugin, ScrollTrigger) are registered inside the component, so there is nothing to set up.\nWrap inline SVG markup, not an