Skip to content
viberdy.dev

Ultra Site

The whole Ultra page, told by the scroll: a glass prism of the reader's own values, a specimen played value by value, a light you set, tools that learn, plans and a footer, all retuned by one shared dial.

ProUltraminimal

This is a viberdy Pro component · launch price

The live preview and props panel are open to everyone. Pro unlocks the full source, the AI prompt and CLI install for this and every other Pro entry: from $19/month, kept while you stay subscribed, or Lifetime $161 once. Launch prices end 31 Oct.

Unlock Pro · from $19/mo

All 17 kits are in Lifetime, $161 once.

Already Pro? Sign in
Preview

Ultra · an adaptive kit for React

The interface that fits the reader.

Six values tune every Ultra component to the person reading it: contrast, warmth, light, density, motion and focus. The ink is re-solved for contrast on every change, so it always reads.

Tune it to youGet the kit

What the reader tunes

One interface. Six values.

Thursday · 14 November

Morning focus block

Three tasks, two hours, then a walk. Notifications wait until 11:30.

  • 09:30Read the brief, onceNow
  • 10:15Draft the outline
  • 11:00Review with the studio
Move to the afternoon
Contrast
Warmth
Light
Density
Motion
Focus

The light is the theme

Set the light. The page follows.

Drag the light: across for warmth, up for exposure. Past the middle the whole page turns to paper, and the ink is re-solved so every line still reads.

Built for daily hands

Tools that learn how they are used.

Zoom a list like a map, from airy rows to a dense ledger. Watch a dock wear in where it is used: habits move closer, get quieter and show their shortcut.

This week

150 rows · 47 px

Review Q4 forecast, blocked

Research
13:45
T-1040

Approve brand refresh, waiting

Legal
08:30
T-1047

Draft data retention policy, open

Research
08:00
T-1054

Audit support macros, done

Research
13:45
T-1061

Draft pricing page, waiting

Legal
13:45
T-1068

Plan release notes, open

Design
11:30
T-1075

Close travel budget, open

Growth
12:30
T-1082

Ship data retention policy, open

Finance
15:00
T-1089

Close support macros, open

Legal
13:00
T-1096

Draft vendor invoices, blocked

Legal
15:45
T-1103

Close support macros, open

Growth
15:30
T-1110

Plan vendor invoices, waiting

Legal
14:00
T-1117

Audit board update, open

Design
15:30
T-1124

Draft pricing page, blocked

Growth
11:00
T-1131

Prepare Q4 forecast, done

Design
17:30
T-1138

Close Q4 forecast, open

Ops
17:15
T-1145

Plan travel budget, open

Growth
13:15
T-1152

Prepare Q4 forecast, blocked

Growth
09:00
T-1159

Plan release notes, open

Legal
14:15
T-1166

Draft travel budget, done

Legal
17:00
T-1173

Close travel budget, open

Research
15:00
T-1180

Prepare onboarding flow, done

Growth
10:45
T-1187

Prepare hiring plan, blocked

Ops
09:45
T-1194

Prepare pricing page, open

Legal
09:30
T-1201

Review travel budget, done

Design
11:45
T-1208

Audit API changelog, open

Research
14:15
T-1215

Prepare API changelog, waiting

Research
12:00
T-1222

Plan pricing page, blocked

Design
13:00
T-1229

Ship data retention policy, blocked

Finance
16:15
T-1236

Reconcile data retention policy, open

Growth
16:45
T-1243

Approve onboarding flow, done

Design
11:00
T-1250

Approve hiring plan, open

Research
16:45
T-1257

Audit pricing page, waiting

Ops
15:15
T-1264

Ship data retention policy, done

Legal
11:00
T-1271

Plan Q4 forecast, open

Research
11:45
T-1278

Design brand refresh, blocked

Ops
11:15
T-1285

Plan Q4 forecast, waiting

Finance
11:00
T-1292

Draft support macros, done

Legal
09:15
T-1299

Approve API changelog, open

Growth
10:45
T-1306

Design board update, open

Design
17:30
T-1313

Audit release notes, done

Design
12:45
T-1320

Audit data retention policy, open

Growth
09:15
T-1327

Prepare Q4 forecast, open

Research
10:30
T-1334

Reconcile hiring plan, open

Research
16:45
T-1341

Prepare onboarding flow, done

Legal
16:30
T-1348

Design release notes, open

Finance
15:15
T-1355

Audit release notes, waiting

Research
15:00
T-1362

Review pricing page, blocked

Research
15:45
T-1369

Approve Q4 forecast, open

Design
08:00
T-1376

Audit brand refresh, open

Finance
09:15
T-1383

Review data retention policy, blocked

Growth
11:45
T-1390

Review travel budget, open

Finance
14:15
T-1397

Plan vendor invoices, open

Ops
13:30
T-1404

Reconcile hiring plan, open

Ops
08:00
T-1411

Audit pricing page, waiting

Finance
09:15
T-1418

Draft travel budget, done

Growth
10:30
T-1425

Design release notes, open

Design
11:00
T-1432

Close release notes, open

Growth
14:30
T-1439

Audit data retention policy, open

Design
12:15
T-1446

Review release notes, open

Design
08:15
T-1453

Design support macros, open

Legal
17:15
T-1460

Prepare pricing page, blocked

Research
14:45
T-1467

Design API changelog, open

Design
16:45
T-1474

Reconcile API changelog, done

Legal
13:15
T-1481

Ship release notes, open

Finance
17:45
T-1488

Design board update, done

Finance
13:00
T-1495

Design travel budget, open

Growth
17:30
T-1502

Review Q4 forecast, open

Legal
14:15
T-1509

Audit onboarding flow, done

Finance
13:00
T-1516

Ship Q4 forecast, done

Ops
15:15
T-1523

Design vendor invoices, open

Ops
16:15
T-1530

Prepare pricing page, waiting

Research
13:15
T-1537

Design support macros, blocked

Design
12:30
T-1544

Plan travel budget, open

Research
14:00
T-1551

Reconcile data retention policy, done

Design
12:00
T-1558

Draft hiring plan, open

Research
14:30
T-1565

Ship API changelog, done

Finance
11:15
T-1572

Design data retention policy, done

Legal
10:45
T-1579

Prepare hiring plan, open

Research
17:15
T-1586

Design brand refresh, blocked

Design
12:30
T-1593

Prepare pricing page, done

Research
16:15
T-1600

Close support macros, waiting

Finance
15:30
T-1607

Review pricing page, blocked

Finance
13:45
T-1614

Design release notes, done

Ops
17:30
T-1621

Close support macros, blocked

Ops
11:45
T-1628

Approve hiring plan, open

Finance
14:30
T-1635

Audit Q4 forecast, done

Ops
13:00
T-1642

Ship release notes, open

Finance
13:00
T-1649

Audit Q4 forecast, open

Legal
17:30
T-1656

Close onboarding flow, open

Finance
15:30
T-1663

Draft pricing page, blocked

Growth
17:45
T-1670

Design vendor invoices, blocked

Ops
14:15
T-1677

Reconcile API changelog, open

Research
10:45
T-1684

Audit board update, open

Design
17:30
T-1691

Plan release notes, open

Research
17:00
T-1698

Prepare hiring plan, waiting

Growth
09:00
T-1705

Design release notes, done

Finance
11:30
T-1712

Close travel budget, done

Ops
12:00
T-1719

Design vendor invoices, open

Finance
10:45
T-1726

Ship Q4 forecast, open

Finance
11:15
T-1733

Approve API changelog, open

Design
15:15
T-1740

Draft Q4 forecast, waiting

Legal
14:30
T-1747

Plan API changelog, done

Finance
16:30
T-1754

Ship travel budget, done

Research
14:30
T-1761

Design board update, done

Growth
12:30
T-1768

Ship hiring plan, open

Design
14:45
T-1775

Approve Q4 forecast, done

Legal
16:30
T-1782

Prepare brand refresh, open

Finance
12:45
T-1789

Draft data retention policy, done

Design
12:00
T-1796

Plan hiring plan, open

Design
17:30
T-1803

Review support macros, waiting

Design
11:15
T-1810

Plan onboarding flow, open

Finance
11:00
T-1817

Close data retention policy, open

Ops
08:15
T-1824

Prepare support macros, done

Research
15:30
T-1831

Plan pricing page, waiting

Design
09:00
T-1838

Design travel budget, open

Growth
09:45
T-1845

Close support macros, blocked

Growth
17:00
T-1852

Plan support macros, done

Growth
14:15
T-1859

Approve vendor invoices, open

Finance
08:00
T-1866

Draft onboarding flow, open

Growth
09:00
T-1873

Audit vendor invoices, open

Ops
09:30
T-1880

Draft support macros, done

Ops
09:45
T-1887

Prepare pricing page, done

Growth
08:30
T-1894

Prepare support macros, blocked

Design
14:45
T-1901

Approve brand refresh, blocked

Ops
17:45
T-1908

Approve vendor invoices, open

Research
11:15
T-1915

Review vendor invoices, open

Research
09:45
T-1922

Prepare board update, open

Ops
09:30
T-1929

Prepare data retention policy, done

Finance
17:45
T-1936

Plan release notes, open

Finance
09:00
T-1943

Plan hiring plan, open

Design
13:00
T-1950

Plan brand refresh, open

Finance
13:45
T-1957

Prepare travel budget, open

Design
11:45
T-1964

Prepare brand refresh, open

Legal
14:00
T-1971

Close release notes, open

Growth
13:00
T-1978

Audit release notes, open

Finance
16:45
T-1985

Audit release notes, waiting

Research
10:15
T-1992

Reconcile Q4 forecast, blocked

Research
10:30
T-1999

Audit Q4 forecast, done

Finance
08:30
T-2006

Review board update, done

Legal
12:45
T-2013

Reconcile board update, open

Research
12:00
T-2020

Design data retention policy, open

Growth
13:45
T-2027

Reconcile release notes, done

Growth
17:15
T-2034

Plan pricing page, open

Ops
14:00
T-2041

Draft travel budget, open

Growth
15:45
T-2048

Review travel budget, open

Ops
08:30
T-2055

Draft travel budget, blocked

Legal
11:00
T-2062

Design data retention policy, open

Finance
16:00
T-2069

Audit vendor invoices, open

Design
12:45
T-2076

Design support macros, blocked

Growth
14:45
T-2083

Day60of 91

It learned what you reach for.

Scroll to replay ninety-one days of use. The dock never moves under the pointer, and says what it changed.

Search: 0 uses, press 192 → 192 ms

Pick your way in

Take Ultra home.

Free

$0forever

Every free entry, to copy and ship.

  • Free entries in every style
  • Source to copy and paste
  • shadcn CLI installs
  • Live previews and props
Browse the library

Ultra kit

This kit
$39one-time

This whole site, cut into parts.

  • All ten Ultra entries
  • The full site and each section
  • An AI prompt for every part
  • Yours to keep
Get the kit

Pro

$119per year

Every kit in the library, new drops included.

  • Every Pro entry, every style
  • Ultra and every other kit
  • Each new drop while you're Pro
  • Prompts, CLI and source
Go Pro

Prices in USD. Every kit is included in Pro.

Fits the reader.

Get the Ultra kitBrowse the library
viberdy

Premium React components in every style, built to be pasted.

Your tuningFollowing your system.

© 2026 viberdy. All rights reserved.

Props

No runtime dependencies
"use client";

import { useEffect, useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
import type { CSSProperties, KeyboardEvent as ReactKeyboardEvent, PointerEvent as ReactPointerEvent, ReactNode, RefObject } from "react";

/**
 * UltraSite — the whole Ultra page, told by the scroll.
 *
 * A glass prism whose cross-section is the reader's own six values pins the
 * first screen and turns to face them as they scroll; its values draw out as
 * rays ending in chips they can pull. A specimen card then plays each value
 * in turn, a lit studio sweep makes the light the theme control, a ledger
 * and a dock show tools that learn, three plans deal in, and the footer
 * closes on the reader's own shape. One nav floats over all of it with the
 * Aura Dial in it (U opens it), and every part reads the same tuning, so a
 * change made anywhere re-forms the whole page. Works on a page and inside
 * any scrolling box: the screen height is read from whatever scrolls it.
 *

  // ---------------------------------------------------------------
  // Full source available with a viberdy Pro subscription.
  // https://viberdy.dev/pricing
  // ---------------------------------------------------------------
}
Notes

About this whole site

Ultra is the library's adaptive style: the page is tuned by the person reading it. This is the whole site. The first screen pins on a glass prism whose cross-section is the reader's own six values; as they scroll it turns to face them and its values draw out as rays ending in chips they can pull, and every part of the page re-forms as they do. The next section plays one specimen card through each value in turn, so the reader sees what contrast, warmth, light, density, motion and focus each do. Then a lit studio sweep makes the light itself the theme control, a ledger zooms like a map, a dock wears in with use, three plans deal in and the footer closes on the reader's own shape. A floating nav carries the Aura Dial (press U) and tightens as the page scrolls. Values the reader sets are saved on their device and never sent anywhere.

Curator’s note

The Ultra kit as one page; every other Ultra entry is cut from it byte for byte. Pro: two hand-written WebGL2 scenes (the dispersive glass prism and the keylight cyclorama), scroll-told sections driven by an eased chase written straight to the DOM, and one tuning store every part shares. Every Ultra entry reads the same six values (contrast, warmth, light, density, motion, focus) from one shared store, so a change made in any of them re-forms all of them.

Related

Pairs well with

Matched on shared tags and category — the entries most likely to be used alongside this one.

Featured
NewPro

Tuning Prism Hero

heroes

A first screen whose glass prism is the reader's own six values: it turns to face them as they scroll, splits the light into a spectrum, and its values draw out as chips they can pull to retune the page.

herowebglraymarching
NewPro

Attention Site

site templates

A whole website made of anomalies, one room per screen: koi in dry air, a shadow that runs to its lamp, a stone the scroll breaks upward, chrome that fuses, steel that pours, plans that lift off the floor and a footer crossed by shark shadows.

landing pagewebsite templatewebgl
Pro

Holo Gloss Site

site templates

The complete Holo Gloss landing, told by the scroll: cards that open from a pile into a fan and are flown into, a dark room where the app slides through its cards, a bento whose tiles trade height, a word that pulls out of its own letter into the plans, a sign-up and a real footer. Branded viberdy; every word is a prop.

landing pagewebsite templatescroll animation