Framework Recipes

Scrollsequence seamlessly integrates with all modern React frameworks and meta-frameworks.

Next.js (App Router)

Because Scrollsequence components utilize browser APIs (window, HTMLCanvasElement, WebGLRenderingContext), you must mark your component with 'use client':


// app/components/HeroSequence.tsx
'use client';
 
import { Scene, Layer, Canvas2d } from 'scrollsequence/react';
import manifest from '@/public/hero/scrollsequence-manifest.json';
 
export default function HeroSequence() {
  return (
    <Scene>
      <Layer>
        <Canvas2d
          mediaGroups={[
            {
              type: 'manifest',
              rootDir: '/hero/',
              imageSizes: manifest.imageSizes,
            },
          ]}
        />
      </Layer>
    </Scene>
  );
}

Public Directory Serving: When assets are generated into your Next.js ./public/hero/ directory, set rootDir: '/hero/' so the client fetches them directly from the web root.

Vite + React

No special configuration required. Simply import and render:


import { Scene, Layer, Canvas2d } from 'scrollsequence/react';

Astro

In Astro projects with the @astrojs/react integration, use the client:load or client:visible directive:


---
import HeroSequence from '../components/HeroSequence.tsx';
---
 
<HeroSequence client:load />