Chapter 03 of the Month-end story as its own scene: a giant caption lights up word by word while a bar of busywork flips, block by block, into judgment and the percentages tick across. Plays itself when it scrolls into view, or follows a progress value you pass, such as scroll.
Set your access key from API keys as NEXTUI_TOKEN in .env.local and add the @nextui namespace below to components.json once. Then every item installs by name. Each install counts as a copy on a free account.
$pnpm dlx shadcn@latest add @nextui/the-shift
1{2"registries": {3"@nextui": {4"url": "https://nextui.dev/r/{name}.json",5"headers": { "Authorization": "Bearer ${NEXTUI_TOKEN}" }6}7}8}
1"use client";23import { useRef } from "react";4import { useScroll } from "motion/react";5import { TheShift } from "@/components/blocks/the-shift";67// Plays on its own when it scrolls into view:8export function Story() {9return <TheShift badge="With Acme" />;10}1112// Or pin it and let scroll drive it:13export function ScrollStory() {14const ref = useRef<HTMLDivElement>(null);15const { scrollYProgress } = useScroll({ target: ref, offset: ["start 0.4", "end end"] });16return (17<div ref={ref} className="h-[320vh]">18<TheShift className="sticky top-0 h-svh" progress={scrollYProgress} />19</div>20);21}
| Prop | Type | Default | Description |
|---|---|---|---|
| chapter | string | "03" | Chapter number, also drawn as the giant outline behind the scene |
| title | string | "The shift" | Chapter name next to the number |
| lines | ShiftLine[] | two lines | Caption lines; *starred* words get the highlight, `at` is the [start, end] of progress each line lights up over |
| label | string | "Where close time goes" | Small label at the top of the card |
| badge | string | "With Closely" | Pill that pops in once the hand-off happens |
| left | string | "Busywork" | Name of the share that shrinks |
| right | string | "Judgment" | Name of the share that grows |
| from | number | 2 | Bars out of 10 that are judgment before the shift |
| to | number | 8 | Bars out of 10 that are judgment after the shift |
| accent | string | "#ff5a1f" | Highlight color for the captions, bars and badge |
| progress | MotionValue<number> | – | Drive the scene yourself from 0 to 1, for example with scroll. Left out, it plays and loops while on screen |
| duration | number | 7 | Seconds one play takes when the scene drives itself |
| className | string | – | Extra classes on the section |
Sign in to see the code
Preview it freely. A free account copies code and prompts a few times a day.