purrfect uiComponents

Line rise

Lines of text that slide up one after another from behind a clipping edge when the block comes into view.

Behaviour

  • Each line slides up from behind its own clipping edge, one after another, once half the block is on screen (any of it for blocks over 12 lines). The cascade is capped at 0.6s however many lines there are.
  • You choose the line breaks, so nothing is measured or re-split on resize; a long line wraps inside its mask, and an empty string keeps a blank line.
  • Only a transform moves inside each mask, so the layout never shifts; with JavaScript off the text is simply visible.
  • Reduced motion: no rise, each line fades in instead.

Props

PropTypeDescription
linesReactNode[]One entry per line; each rises out of its own mask.
as"p" | "h1" | "h2" | "h3" | "div"default "p"The element to render.
staggernumberdefault 0.075Seconds between one line and the next.
durationnumberdefault 0.75Seconds each line takes to rise.
amountnumberdefault 0.5How much of the block must be on screen before it plays; lower it for blocks taller than the screen.
oncebooleandefault truePlay the first time only; false drops the lines back when the block leaves and replays on return.
containerRefObject<Element | null>Watch a scrolling box instead of the page: the lines rise as the block scrolls into view inside it.
classNamestringSize, weight, colour and line height.

Installation

npx shadcn@latest add https://purrfectui.com/r/line-rise.json

How to use

import { LineRise } from "@/components/ui/line-rise";

<LineRise as="h2" className="text-6xl tracking-tight" lines={["Maps that", "move with", "the world."]} />

// inside a scrolling box: rise as the block scrolls into view there, drop back as it leaves
const box = useRef<HTMLDivElement>(null);
<div ref={box} className="h-96 overflow-y-auto">
  <LineRise container={box} once={false} lines={["Mapinly brings people together", "across languages and cultures."]} />
</div>

Source code

Loading…

Credits

Ported from mapinly.vaibhavtomar.com.

License

MIT. Copy it into your project and change it as you like.

0