Motion primitives with manners

# Install GsapFlipGrid into my Svelte 5 project

Animate CSS Grid filtering, sorting, and promoted-item layout changes with GSAP Flip.

## 1. Install dependencies
bun add gsap

## 2. Save component source
Copy the file at https://github.com/Jktfe/tfeSvelteTemplates/blob/main/src/lib/components/GsapFlipGrid.svelte
to src/lib/components/GsapFlipGrid.svelte in your project.

## 3. (Optional) Save demo route
Copy https://github.com/Jktfe/tfeSvelteTemplates/blob/main/src/routes/gsap-suite/+page.svelte to src/routes/gsap-suite/+page.svelte.

## 4. Props
```ts
{
  items?: GsapFlipGridItem[];
  filters?: GsapFlipGridFilter[];
  initialFilter?: string;
  initialFeaturedId?: string;
  initialDensity?: 'featured' | 'compact';
  initialSort?: 'curated' | 'alpha';
  showHeader?: boolean;
  showControls?: boolean;
  promoteOnClick?: boolean;
}
```

## 5. Usage
```svelte
<GsapFlipGrid
  items={gridItems}
  filters={[{ id: 'catalog', label: 'Catalog' }]}
  initialFeaturedId="directory"
/>
```

## Notes
Client-only Flip plugin load. Use this for real grids and galleries; keep CardStack for physical deck metaphors.

_Inspired by GSAP demo Animate CSS Grid Positions._

# Install ShapeTrailHero into my Svelte 5 project

Geometric morph hero — shapes follow the cursor, settle on click.

## 1. Install dependencies
# No external dependencies

## 2. Save component source
Copy the file at https://github.com/Jktfe/tfeSvelteTemplates/blob/main/src/lib/components/ShapeTrail/ShapeTrailHero.svelte
to src/lib/components/ShapeTrail/ShapeTrailHero.svelte in your project.

## 3. (Optional) Save demo route
Copy https://github.com/Jktfe/tfeSvelteTemplates/blob/main/src/routes/gsap-suite/+page.svelte to src/routes/gsap-suite/+page.svelte.

## 4. Props
```ts
{
  density?: number;                          // 32 (clamped to [8, 128])
  palette?: 'mono' | 'aurora' | 'amber';     // 'aurora'
  ariaLabel?: string;                        // 'Shape Trail hero'
  class?: string;
}
```

## 5. Usage
```svelte
<script lang="ts">
  import ShapeTrailHero from '$lib/components/ShapeTrail/ShapeTrailHero.svelte';
</script>
<ShapeTrailHero density={48} palette="aurora" />
```

## Notes
rAF + canvas2d for the per-particle damped-spring physics (stiffness 0.012, damping 0.86); trail fade via translucent rgba bg fillRect each frame. GSAP core (no business plugins) drives the entrance gsap.timeline (canvas fade + content slide + status slide) and the gsap.to settle/release tweens. prefers-reduced-motion paints a single static lattice and skips both gsap and rAF.

_Inspired by Shape Trail._

# Install LiquidTypeHero into my Svelte 5 project

Variable-font hero — characters inflate under the cursor with spring physics.

## 1. Install dependencies
# No external dependencies

## 2. Save component source
Copy the file at https://github.com/Jktfe/tfeSvelteTemplates/blob/main/src/lib/components/LiquidType/LiquidTypeHero.svelte
to src/lib/components/LiquidType/LiquidTypeHero.svelte in your project.

## 3. (Optional) Save demo route
Copy https://github.com/Jktfe/tfeSvelteTemplates/blob/main/src/routes/gsap-suite/+page.svelte to src/routes/gsap-suite/+page.svelte.

## 4. Props
```ts
{
  words?: string[];                 // ['Words', 'have', 'weight']
  baseWeight?: number;              // 300
  peakWeight?: number;              // 850
  baseScale?: number;               // 1
  peakScale?: number;               // 1.18
  influenceRadius?: number;         // 160 px
  ariaLabel?: string;               // 'Liquid Type hero'
  class?: string;
}
```

## 5. Usage
```svelte
<script lang="ts">
  import LiquidTypeHero from '$lib/components/LiquidType/LiquidTypeHero.svelte';
</script>
<LiquidTypeHero words={['Words', 'have', 'weight']} />
```

## Notes
GSAP core stages a per-glyph fade+lift entrance via gsap.from with stagger. rAF runs the per-character damped-spring on font-weight + scale (stiffness 0.18/0.20, damping 0.74/0.72) and writes --lt-weight + --lt-scale custom properties each frame. Variable font (Inter Variable / Geist with wght axis) gives smooth interpolation; falls back to discrete font-weight on non-variable fonts. Per-character spans are aria-hidden; the joined word string is exposed via .lt-sr-only for assistive tech.

_Inspired by Liquid Type._

# Install GsapTimeline into my Svelte 5 project

Timeline events with gsap.timeline entrance — the GSAP variant of native Timeline.

## 1. Install dependencies
# No external dependencies

## 2. Save component source
Copy the file at https://github.com/Jktfe/tfeSvelteTemplates/blob/main/src/lib/components/GsapTimeline.svelte
to src/lib/components/GsapTimeline.svelte in your project.

## 3. (Optional) Save demo route
Copy https://github.com/Jktfe/tfeSvelteTemplates/blob/main/src/routes/gsap-suite/+page.svelte to src/routes/gsap-suite/+page.svelte.

## 4. Props
```ts
{
  events: TimelineEvent[];
  alignment?: 'left' | 'right' | 'alternate';      // 'alternate'
  showProgress?: boolean;                           // false
  dateFormat?: (date: Date) => string;
  onEventClick?: (event: TimelineEvent) => void;
  ariaLabel?: string;                               // 'GSAP timeline'
  class?: string;
}
```

## 5. Usage
```svelte
<script lang="ts">
  import GsapTimeline from '$lib/components/GsapTimeline.svelte';
  const milestones = [
    { id: '1', date: '2024-01-15', title: 'Discovery', completed: true },
    { id: '2', date: '2024-03-01', title: 'MVP',       completed: true },
    { id: '3', date: '2024-06-15', title: 'Beta' },
    { id: '4', date: '2024-09-01', title: 'GA' }
  ];
</script>
<GsapTimeline events={milestones} showProgress />
```

## Notes
Drop-in for native Timeline with GSAP-composed entrance: items slide-up (power3.out, 0.08s stagger), markers scale + rotate with back.out(1.6) overshoot at +0.05s, optional progress line draws (scaleY 0→1 power2.inOut). IntersectionObserver fires once at threshold 0.15. prefers-reduced-motion paints the assembled state via .gsap-timeline--reduced CSS rule.

_Inspired by Timeline._

# Install GsapGantt into my Svelte 5 project

Gantt schedule with gsap.timeline entrance — the GSAP variant of native Gantt.

## 1. Install dependencies
# No external dependencies

## 2. Save component source
Copy the file at https://github.com/Jktfe/tfeSvelteTemplates/blob/main/src/lib/components/GsapGantt.svelte
to src/lib/components/GsapGantt.svelte in your project.

## 3. (Optional) Save demo route
Copy https://github.com/Jktfe/tfeSvelteTemplates/blob/main/src/routes/gsap-suite/+page.svelte to src/routes/gsap-suite/+page.svelte.

## 4. Props
```ts
{
  tasks: GanttTask[];
  startDate?: string | Date;
  endDate?: string | Date;
  dayWidth?: number;                                // 32
  rowHeight?: number;                               // 36
  labelWidth?: number;                              // 220
  showWeekends?: boolean;                           // true
  showToday?: boolean;                              // true
  showDependencies?: boolean;                       // true
  showProgress?: boolean;                           // true
  dateFormat?: 'short' | 'long' | (d: Date) => string;
  onTaskClick?: (task: GanttTask) => void;
  ariaLabel?: string;                               // 'GSAP Gantt chart'
  class?: string;
}
```

## 5. Usage
```svelte
<script lang="ts">
  import GsapGantt from '$lib/components/GsapGantt.svelte';
  const schedule = [
    { id: 'spec',   name: 'Spec',     start: '2026-05-01', end: '2026-05-05', progress: 100 },
    { id: 'kick',   name: 'Kick-off', start: '2026-05-06', end: '2026-05-06', isMilestone: true, dependencies: ['spec'] },
    { id: 'build',  name: 'Build',    start: '2026-05-07', end: '2026-05-15', progress: 35, dependencies: ['kick'] },
    { id: 'launch', name: 'Launch',   start: '2026-05-20', end: '2026-05-20', isMilestone: true, dependencies: ['build'] }
  ];
</script>
<GsapGantt tasks={schedule} />
```

## Notes
Drop-in for native Gantt with GSAP-composed entrance: bars scaleX 0→1 from left (0.06s stagger, power3.out), milestones scale 0→1 with back.out(1.7) at +0.15s, arrows opacity 0→1 at +0.45s once bars have landed. IntersectionObserver fires once at threshold 0.15. Static context (axis, weekend bands, today line, labels) does not animate by design — entrance focuses on bars + milestones + arrows.

_Inspired by Gantt._

# Install PicassoPortfolio into my Svelte 5 project

Scroll-driven portfolio — paintings dissect and reassemble.

## 1. Install dependencies
# No external dependencies

## 2. Save component source
Copy the file at https://github.com/Jktfe/tfeSvelteTemplates/blob/main/src/lib/components/Picasso/PicassoPortfolio.svelte
to src/lib/components/Picasso/PicassoPortfolio.svelte in your project.

## 3. (Optional) Save demo route
Copy https://github.com/Jktfe/tfeSvelteTemplates/blob/main/src/routes/gsap-suite/+page.svelte to src/routes/gsap-suite/+page.svelte.

## 4. Props
```ts
{
  paintings: PicassoPainting[];      // [{ id, title, caption?, scene?, palette }]
  gridSize?: number;                  // 4 (4x4 grid of swatches)
  duration?: number;                  // 1.4s reassemble timeline
  ariaLabel?: string;                 // 'Picasso portfolio'
  class?: string;
}
```

## 5. Usage
```svelte
<script lang="ts">
  import PicassoPortfolio from '$lib/components/Picasso/PicassoPortfolio.svelte';
  const works = [
    { id: '1', title: 'Cubist Calm', caption: 'Soft geometric harmony.', scene: 'Suite I',
      palette: ['#1d4ed8', '#0f766e', '#fde68a', '#f87171', '#9333ea'] },
    { id: '2', title: 'Aurora', caption: 'Cool tones, hot accent.', scene: 'Suite II',
      palette: ['#0891b2', '#9333ea', '#e879f9', '#fbbf24'] }
  ];
</script>
<PicassoPortfolio paintings={works} />
```

## Notes
GSAP core (no ScrollTrigger / Flip plugins needed): IntersectionObserver fires once per panel at threshold 0.4, gsap.timeline scatters swatches via Fibonacci-spaced angle (cos/sin of i * 137.5°) and reassembles with stagger.from "random". Title + caption fades follow. prefers-reduced-motion + .pp-panel--reduced CSS rule pin the assembled state without animation.

_Inspired by Picasso._

# Install MomentumSlider into my Svelte 5 project

Editorial 3D carousel — momentum scrolling, modal handshake, perspective depth.

## 1. Install dependencies
# No external dependencies

## 2. Save component source
Copy the file at https://github.com/Jktfe/tfeSvelteTemplates/blob/main/src/lib/components/MomentumSlider/MomentumSlider.svelte
to src/lib/components/MomentumSlider/MomentumSlider.svelte in your project.

## 3. (Optional) Save demo route
Copy https://github.com/Jktfe/tfeSvelteTemplates/blob/main/src/routes/gsap-suite/+page.svelte to src/routes/gsap-suite/+page.svelte.

## 4. Props
```ts
{
  items: MomentumSliderItem[];                                   // [{ id, title, eyebrow?, subtitle?, description?, image?, alt?, color? }, …]
  initialIndex?: number;                                          // 0
  cardWidth?: number;                                             // 280
  cardGap?: number;                                               // 32
  ariaLabel?: string;                                             // 'Momentum slider'
  onSelect?: (item: MomentumSliderItem, index: number) => void;
  onExpand?: (item: MomentumSliderItem, index: number) => void;
  class?: string;
}
```

## 5. Usage
```svelte
<script lang="ts">
  import MomentumSlider from '$lib/components/MomentumSlider/MomentumSlider.svelte';
  const scenes = [
    { id: '1', title: 'Establishing', eyebrow: 'Wide',  subtitle: 'Take 1', description: 'Wide, slow, deliberate.' },
    { id: '2', title: 'Reveal',       eyebrow: 'Cut',   subtitle: 'Take 2', description: 'Cut to close-up.' },
    { id: '3', title: 'Tension',      eyebrow: 'Hold',  subtitle: 'Take 3', description: 'Let the audience breathe.' },
    { id: '4', title: 'Coda',         eyebrow: 'Pull',  subtitle: 'Take 4', description: 'Pull back. The frame becomes a memory.' }
  ];
</script>
<MomentumSlider items={scenes} />
```

## Notes
GSAP core (no Draggable/Observer/Flip required): native pointer drag + rAF velocity decay (0.93/frame); gsap.to with power3.out for snap, gsap.timeline for the modal handshake (backdrop fade @0 + modal scale-in @0.05 with power3.out). prefers-reduced-motion skips inertia + the timeline; modal appears/disappears instantly. Keyboard: Arrow keys + Home/End to navigate, Enter to expand, Escape to close.

_Inspired by Momentum Slider._

# Install DragGallery into my Svelte 5 project

Fan-stack ecommerce slider you can flick through with momentum.

## 1. Install dependencies
# No external dependencies

## 2. Save component source
Copy the file at https://github.com/Jktfe/tfeSvelteTemplates/blob/main/src/lib/components/DragGallery/DragGallery.svelte
to src/lib/components/DragGallery/DragGallery.svelte in your project.

## 3. (Optional) Save demo route
Copy https://github.com/Jktfe/tfeSvelteTemplates/blob/main/src/routes/gsap-suite/+page.svelte to src/routes/gsap-suite/+page.svelte.

## 4. Props
```ts
{
  items: DragGalleryItem[];                                     // [{ id, title, eyebrow?, subtitle?, image?, alt? }, …]
  initialIndex?: number;                                        // 0
  cardWidth?: number;                                           // 220
  cardGap?: number;                                             // 32
  ariaLabel?: string;                                           // 'Drag gallery'
  onSelect?: (item: DragGalleryItem, index: number) => void;
  class?: string;
}
```

## 5. Usage
```svelte
<script lang="ts">
  import DragGallery from '$lib/components/DragGallery/DragGallery.svelte';
  const products = [
    { id: 'a', title: 'Linen Tote',    eyebrow: 'Bags',  subtitle: '£64' },
    { id: 'b', title: 'Cedar Tray',    eyebrow: 'Home',  subtitle: '£42' },
    { id: 'c', title: 'Brass Compass', eyebrow: 'Gifts', subtitle: '£38' },
    { id: 'd', title: 'Wool Throw',    eyebrow: 'Home',  subtitle: '£120' }
  ];
</script>
<DragGallery items={products} onSelect={(item) => console.log(item.title)} />
```

## Notes
GSAP core (no Draggable/InertiaPlugin/Observer required): native pointer events + setPointerCapture for the drag, rAF velocity decay (0.93/frame) for inertia, gsap.to with power3.out for the snap-on-release. Keyboard parity: ArrowLeft/Right + Home/End. role="listbox" + role="option" + aria-selected wired correctly.

_Inspired by Drag Gallery._

# Install CinemaReel into my Svelte 5 project

Letterboxed scroll-reel of cinematic stills.

## 1. Install dependencies
# No external dependencies

## 2. Save component source
Copy the file at https://github.com/Jktfe/tfeSvelteTemplates/blob/main/src/lib/components/CinemaReel/CinemaReel.svelte
to src/lib/components/CinemaReel/CinemaReel.svelte in your project.

## 3. (Optional) Save demo route
Copy https://github.com/Jktfe/tfeSvelteTemplates/blob/main/src/routes/gsap-suite/+page.svelte to src/routes/gsap-suite/+page.svelte.

## 4. Props
```ts
{
  stills: CinemaReelStill[];   // [{ id, image?, title?, caption?, scene?, color? }, …]
  letterboxRatio?: number;     // 0.18 — top/bottom bar height as % of frame
  activeThreshold?: number;    // 0.55 — IntersectionObserver ratio to activate
  ariaLabel?: string;          // 'Cinema reel'
  class?: string;
}
```

## 5. Usage
```svelte
<script lang="ts">
  import CinemaReel from '$lib/components/CinemaReel/CinemaReel.svelte';
  const stills = [
    { id: '1', title: 'Opening',  caption: 'Wide shot',   scene: '01', color: '#1d4ed8' },
    { id: '2', title: 'Reveal',   caption: 'Cut in',      scene: '02', image: '/scene-2.jpg' },
    { id: '3', title: 'Coda',     caption: 'Slow pull',   scene: '03', color: '#0f766e' }
  ];
</script>
<CinemaReel {stills} />
```

## Notes
IntersectionObserver picks the active frame; gsap.to drives the easing for filter/scale/mask height/caption opacity. GSAP core only — no business plugins. Falls back to first-still-active + static class when IO unavailable, and to a static .cr-frame--reduced.cr-frame--active CSS rule under prefers-reduced-motion.

_Inspired by Cinema Reel._

# Install GsapRevealSequence into my Svelte 5 project

Stagger any group of children with an SSR-safe gsap.context wrapper.

## 1. Install dependencies
bun add gsap

## 2. Save component source
Copy the file at https://github.com/Jktfe/tfeSvelteTemplates/blob/main/src/lib/components/GsapRevealSequence.svelte
to src/lib/components/GsapRevealSequence.svelte in your project.

## 3. (Optional) Save demo route
Copy https://github.com/Jktfe/tfeSvelteTemplates/blob/main/src/routes/gsap-suite/+page.svelte to src/routes/gsap-suite/+page.svelte.

## 4. Props
```ts
{
  selector?: string;        // default '[data-gsap-item]'
  axis?: 'x' | 'y';         // default 'y'
  distance?: number;        // default 28
  duration?: number;        // default 0.7
  delay?: number;           // default 0
  stagger?: number;         // default 0.08
  ease?: string;            // default 'power3.out'
}
```

## 5. Usage
```svelte
<GsapRevealSequence stagger={0.12} distance={42}>
  {#each cards as card (card.title)}
    <article data-gsap-item>...</article>
  {/each}
</GsapRevealSequence>
```

_Inspired by GSAP scoped-timeline pattern._

# Install FanDeckCarousel into my Svelte 5 project

Editorial fan-stack carousel with keyboard + drag navigation.

## 1. Install dependencies
bun add gsap

## 2. Save component source
Copy the file at https://github.com/Jktfe/tfeSvelteTemplates/blob/main/src/lib/components/FanDeckCarousel.svelte
to src/lib/components/FanDeckCarousel.svelte in your project.

## 3. (Optional) Save demo route
Copy https://github.com/Jktfe/tfeSvelteTemplates/blob/main/src/routes/gsap-suite/+page.svelte to src/routes/gsap-suite/+page.svelte.

## 4. Props
```ts
{
  items: FanDeckItem[];
  initialIndex?: number;
}
```

## 5. Usage
```svelte
<FanDeckCarousel items={deckItems} />
```

_Inspired by Drag Gallery._