Components Cards & Layout InteractiveCards

InteractiveCards

Scroll-driven paintings portfolio with fan, conveyor, and detail-view phases.

Live demo

Scroll the page to step through the three phases: fan → conveyor → detail view (click a card). The component owns its own sticky pin and tall scroll spacer, so let it fill the route below.

Every brushstroke
deserves a gallery.

Hand-picked originals and limited edition prints from a collective of working painters. Every piece is signed, numbered, and shipped museum-ready.

4.9 from 2,400 collectors Free worldwide shipping

Implementation

<script>
  import InteractiveCards from '$lib/components/InteractiveCards.svelte';
</script>

<!-- The component manages its own sticky-pinned scroll region -->
<InteractiveCards />

InteractiveCards is a multi-phase scroll-driven gallery: cards rise from below, fan into a parabolic arc, then travel along a curved diagonal conveyor. Click a card for a detail view with size, material and add-to-cart pills. Layout pinning uses native position: sticky inside a tall outer spacer — no GSAP required — and per-frame spring interpolation runs through requestAnimationFrame.

API

Prop	Type	Default	Description
`projects`	`InteractiveProject[]`	fallback constants	Paintings to render in the conveyor and detail view.
`testimonials`	`InteractiveTestimonial[]`	fallback constants	Testimonials shown in the awards / quotes section.

Installation

cp src/lib/components/InteractiveCards.svelte ./src/lib/components/

Dependencies

Svelte 5+
Zero external dependencies

For your agent

01Use this for editorial or product storytelling where scroll position drives a multi-phase card choreography.

# Install InteractiveCards into my Svelte 5 project

Scroll-driven paintings portfolio with fan, conveyor, and detail-view phases.

## 1. Install dependencies
# No external dependencies

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

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

## 5. Usage
```svelte
<script>
  import InteractiveCards from '$lib/components/InteractiveCards.svelte';
</script>

<!-- The component manages its own sticky-pinned scroll region -->
<InteractiveCards />
```

Every brushstroke deserves a gallery.

Every brushstroke
deserves a gallery.