Slice Strip

Install

Or by hand, in a Next.js project with shadcn set up. It writes components/pastetaste/slice-strip.tsx.

Install the pastetaste component "Slice Strip" (slice-strip) into this Next.js project and use it.

What it is: A strip of typographic posters seen through a window. Moving on cuts the poster into vertical slices that slide away in alternating directions while repeated words cascade in.

Before you place it, ask me (one short message, in my language; "skip" = sensible default): which page and section it goes in, my brand colour (hex), the text, labels or images it should show, and whether I want my logo or my own copy in the demo content. Then:

Steps:
1. If the project has no components.json, run: npx shadcn@latest init -y -d. Then run: npx shadcn@latest add https://pastetaste.com/r/slice-strip.json
   (it writes components/pastetaste/slice-strip.tsx; install any npm packages it reports: motion@^12.23.0).
2. Import it: import { SliceStrip } from "@/components/pastetaste/slice-strip" (check the file for the exact named export).
3. Put it where it fits on the page I name, keep the rest of the page untouched, and pass props for my colours instead of editing the installed file.
4. It does not depend on Tailwind; colours come from CSS variables (--pt-*) or props.
5. It supports prefers-reduced-motion with a still state; do not remove it.

Props (all optional unless the type has no default):
- posters: { label: string; content: ReactNode }[] = three one-word posters — The posters: a label for screen readers and the content printed on each, your own node or a KineticPoster.
- aspect: number = 0.8 — Poster width over height.
- slices: number = 9 — Number of vertical slices in a transition.
- duration: number = 1 — Transition length in seconds.
- autoplay: number = 0 — Seconds each poster stays before moving on; 0 turns autoplay off. Autoplay holds on hover and focus and adds a Pause button.
- top: ReactNode — Small centred line above the strip.
- bottom: ReactNode — Small centred line below the strip.
- index: number — Current poster (controlled); pair it with onChange.
- defaultIndex: number = 0 — Initial poster when uncontrolled.
- onChange: (index: number) => void — Called when a transition ends and the poster in the middle changes.
- accent: string = var(--pt-accent, #ff4b2b) — Colour of focus rings; the accent KineticPoster tone uses --pt-accent.
- tone: 'light' | 'dark' = 'dark' — Ink for light or dark grounds; --pt-ink, --pt-muted, --pt-line and --pt-ground override it.
- label: string = 'Poster strip' — Accessible name of the carousel.
- className: string — Extra classes on the root.
- style: CSSProperties — Inline style overrides on the root; it needs a height from its parent or from this prop.

Live preview: https://pastetaste.com/c/slice-strip
Then run the dev server, check it in the browser at desktop and mobile width, and tell me the page URL.

Props 15