# Ring Animation

Scroll-scrubbed furniture ring. Copy sits in a centered container on the right; the image wheel breaks out to the left edge on desktop and becomes a bottom arc on small screens.

## Stack

- GSAP 3 + ScrollTrigger
- Fraunces + Manrope

## Export code

Open `index.html` locally. Custom classes only (no Client-First). Twelve `ring_card` nodes (six images × 2) live in the HTML so Webflow can swap assets.

## Webflow copy

Target: **Components → Library**. Group: **GSAP Library**.

1. Structure matches `index.html` (`ring_section` + `data-ring`).
2. Code Embed (last child): EMBED ONLY CSS + `script.js`.
3. Site footer (once): GSAP + ScrollTrigger — not inside the embed.

### Classes

`ring_section` · `ring_frame` · `ring_pad` · `ring_container` · `ring_copy` · `ring_title` · `ring_body` · `ring_cta` · `ring_cta-icon` · `ring_visual` · `ring_pivot` · `ring_wheel` · `ring_card` · `ring_card-image`

## Motion

- Desktop: wheel spins 360° while the section scrolls through the viewport (`scrub: 0.6`).
- ≤800px: stacked layout, smaller spin (80°).
- `prefers-reduced-motion`: layout only, no scrub tween.
