Cinematic Handover

Installation

pnpm dlx shadcn@latest add @cleverui/cinematic-handover

Requires the @cleverui registry in your components.json, a one-off, two-line setup.

Usage

tsx

import { CinematicHandover } from '@/components/blocks/cinematic-handover'

Exampletsx

import { CinematicHandover } from '@/components/blocks/cinematic-handover'

export default function CinematicHandoverDemo() {
  return (
    <div>
      <CinematicHandover
        sceneA={{
          kicker: 'Scene A · Night watch',
          title: 'One lens on the southern sky.',
          body: 'The array holds a single aperture open all night, sampling the same square degree every eleven seconds. Keep scrolling, do not lose the circle.',
        }}
        sceneB={{
          kicker: 'Scene B · First light',
          title: 'The same circle, now a horizon.',
          body: 'What you tracked as a lens is the dish itself, cut against the dawn line. One figure carried across the cut, that is the whole grammar of a match-cut.',
        }}
      />
      {/* scroll runway so the handover has room to play in context */}
      <div aria-hidden="true" className="h-[60vh]" />
    </div>
  )
}

API reference

CinematicHandover accepts the following props.

Prop	Type	Default	Description
`sceneA`*	`HandoverScene`	–	the opening scene, copy left, keyed to the small circle figure
`sceneB`*	`HandoverScene`	–	the arriving scene, copy right, keyed to the large circle figure
`handoverVh`	`number`	`240`	scroll runway for the handover in vh (default 240)

…plus everything from React.HTMLAttributes<HTMLElement>: className, event handlers, aria attributes and the rest pass straight through.

Referenced types

Typestsx

export interface HandoverScene {
  kicker?: string
  title: string
  body: string
}

Related components

Zoom Portal

A React scroll dive through a hairline-framed portal, the frame scales past the camera while the scene inside counter-scales into the new stage. Native scroll, fully reversible, Tailwind-themed.

Dual Axis Chapters

A pinned React stage where one scroll value drives two geared axes, chapters advance vertically while a marker filmstrip slides in counterpoint, with a live mono ratio readout. Tailwind-themed.

Scroll Director

A pinned narrative stage for React, scroll scrubs through choreographed beats on a sticky frame with a cue rail and running timecode, fully reversible and never scroll-jacked. Tailwind-themed.

Sticky Grid Unfold

A pinned React deck that unfolds into a ruled grid on scroll, cards travel from a neat pile to their seats as outlines and skeleton lines draw in, fully reversible. Seeded, Tailwind-themed.

Mask Wipe Kit

A two-panel wipe stage for React, iris, blinds, split, or sweep mask geometry scrubbed by scroll or a progress prop, a primary keyline on the wipe front. Tailwind-themed, reduced-motion honest.

Scroll Sequence Kit

An honest scrubbed frame sequence for React, canvas plays a deterministic procedural wireframe, or consumer frame URLs through a decode-ahead pipeline, driven by native scroll. Tailwind-themed.

Frequently asked questions

How do I install the Cinematic Handover component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/cinematic-handover`. The shadcn CLI copies the source into your project, you own the code from that point. You can also copy the source directly from this page.

What dependencies does Cinematic Handover require?

Cinematic Handover has no npm dependencies beyond React and Tailwind CSS itself, so there is nothing extra to install or keep updated.

Can I theme Cinematic Handover to match my brand?

Yes. The component is styled entirely with Tailwind utilities over standard design tokens (primary, background, muted, border), so it inherits your existing shadcn/ui theme automatically. Change your CSS variables and the component follows, no source edits needed for palette, radius, or fonts.

Preview & code