In-view title

Bring a section title in as it scrolls into view.

npx shadcn@latest add @silicon-ui/in-view-title
textmotionheading
Loading…

Installation

With the shadcn CLI

npx shadcn@latest add @silicon-ui/in-view-title

Manually

  1. Install the dependencies.

    npm install motion

  2. Copy these files into your project. Shared files are skipped if you already have them.

    • components/silicon-ui/in-view-title/in-view-title.tsx
    • components/silicon-ui/in-view-title/in-view-title.module.css

  3. Install the foundation once per app for the design and motion tokens: npx shadcn@latest add @silicon-ui/silicon-foundation

Usage

Source codetsx
import { InViewTitle } from "@/components/silicon-ui/in-view-title/in-view-title";

API reference

PropTypeDefault
text*string—
variantInViewTitleVariant

"line""word""blur""tracking""wipe"

"blur"
as"h1" | "h2" | "h3""h2"
linesstring[]—
classNamestring—
idstring—
oncebooleantrue

Dependencies

npm
motion
Registry
silicon-motion-tokens