Giant Text Mask Home
A giant headline filled with moving gradient and particles; on scroll the type scales into a viewport mask you pass through into the content.
Install
npx shadcn@latest add "https://webberui.com/r/text-mask-home.json?t=<install token>"The whole page lands in app/templates/text-mask-home/. You can also use a long-lived licence key instead: set the Authorization: Bearer <key> header in the registries block of components.json — better for CI or a project several people share. What you may do with the source is in the licence terms.
Sections it ships with
Sections inside one template share the same design tokens, so swapping and reordering them keeps the colours, spacing and animation rhythm consistent. Pick and combine them in the section composer.
- 1
Giant Text Mask Hero
A nav bar above a giant MONO particle mask; on scroll the type scales up and you pass through it into the variable-font workbench.
hero - 2
Stats Band
A band of four key metrics that fade and lift into view in sequence.
stats - 3
Product Features
Six cards with a cursor-magnetic glow, covering the full infrastructure behind the font engine.
features - 4
Three-Step Onboarding
A marquee text strip alongside a vertical progress line, walking through the three onboarding steps.
timeline - 5
Customer Stories
Three customer quotes with gradient avatars and job titles.
testimonial - 6
Plans and Pricing
Three plan cards side by side, with the middle one flagged Most Popular.
pricing - 7
Closing Call to Action
An oversized headline and two action buttons inside a gradient-glow card.
cta - 8
Footer
Complete footer with a brand block, three link columns and a copyright row.
footer
What you get is source code
Not an npm package, not a zip file. Once installed, the page's TypeScript source sits in your repo: edit it however you like, no runtime dependency, no expiry mechanism. Your site keeps running even if ours goes down.
Browse the other 103 templates →