Zoom Portal

Installation

pnpm dlx shadcn@latest add @cleverui/zoom-portal

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

Usage

tsx

import { ZoomPortal } from '@/components/blocks/zoom-portal'

Exampletsx

import { ZoomPortal } from '@/components/blocks/zoom-portal'

export default function ZoomPortalDemo() {
  return (
    <div>
      <ZoomPortal
        outer={{
          kicker: 'Control room',
          title: 'The whole district fits in one small frame.',
          body: 'Every substation, feeder, and meter of the eastern grid, drawn live at 1:4 scale. Scroll to dive through the glass.',
        }}
        inner={{
          kicker: 'Inside the portal',
          title: 'Eastern district, at full scale.',
          body: 'You are now on the arrived stage, the miniature became the room. Pull back up and the dive reverses to the millimetre.',
        }}
        stats={[
          { label: 'Feeders', value: '148' },
          { label: 'Load now', value: '312 MW' },
          { label: 'Uptime', value: '99.98%' },
        ]}
      />
      {/* scroll runway so the dive has room to play in context */}
      <div aria-hidden="true" className="h-[60vh]" />
    </div>
  )
}

API reference

ZoomPortal accepts the following props.

Prop	Type	Default	Description
`outer`*	`ZoomPortalScene`	–	scene A, the copy that frames the portal before the dive
`inner`*	`ZoomPortalScene`	–	scene B, the stage you arrive on inside the portal
`stats`	`ZoomPortalStat[]`	`[]`	optional mono stats that settle in with the inner stage
`diveVh`	`number`	`240`	scroll runway for the dive 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 ZoomPortalScene {
  kicker?: string
  title: string
  body?: string
}

export interface ZoomPortalStat {
  label: string
  value: string
}

Related components

Cinematic Handover

A directed match-cut between two full-bleed React scenes, scroll scrubs a hairline figure that travels and grows from scene A into scene B's focal element. 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.

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.

SVG Mask Chapters

Chapters revealed through drawn SVG mask shapes for React, a circle, keyhole arch, and diagonal band draw and fill as scroll scrubs a pinned stage. Tailwind tokens, reversible, reduced-motion safe.

Frequently asked questions

How do I install the Zoom Portal component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/zoom-portal`. 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 Zoom Portal require?

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

Can I theme Zoom Portal 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