DeckLayout

Features

• Scroll-snap slide container — full-viewport snapping between slides
• Keyboard navigation — Arrow keys, Space, Home, and End to move between slides
• Mouse wheel navigation — smooth scroll-snap on wheel events
• IntersectionObserver animations — triggers entrance animations as slides come into view
• Integrated DotNav — automatic dot navigation synced to scroll position
• Optional controls render prop — inject custom UI into the deck chrome

Installation

npx visor add deck-layout

Usage

import { DeckLayout } from '@/components/deck/deck-layout/deck-layout';

export default function Example() {
  return (
    <DeckLayout slideTitles={['Intro', 'Features', 'Demo', 'Close']}>
      <section id="s-intro">Slide 1</section>
      <section id="s-features">Slide 2</section>
      <section id="s-demo">Slide 3</section>
      <section id="s-close">Slide 4</section>
    </DeckLayout>
  );
}

API Reference