purrfect uiComponents

Hero reveal

A hero whose photo frame opens along the y-axis, then the headline blurs up and the action springs in.

Behaviour

  • When the hero first scrolls into view, the photo frame opens from the middle along the y-axis (0.9s).
  • The headline and the line under it fade up out of a blur, 0.12s apart.
  • The action springs in last, at 1.28s.
  • Plays once. BlurReveal is exported too, for any block.
  • Reduced motion: the frame and text fade in, nothing moves or blurs, and the action skips the spring.

Props

PropTypeDescription
srcstringBackground photo. It fills the frame with an 8px inset and rounded corners.
altstringdefault ""Alt text. Empty marks the photo decorative.
titleReactNodeThe headline.
descriptionReactNodeThe line under the headline.
actionReactNodeA button or link, popped in last.
classNamestringClasses for the section: height, max width.

Installation

npx shadcn@latest add https://purrfectui.com/r/hero-reveal.json

How to use

import { HeroReveal } from "@/components/ui/hero-reveal";

<HeroReveal
  src="/hero.jpg"
  title="Your wealth, finally working."
  description="The AI finance app that tracks your spending."
  action={<a href="#get">Get the app</a>}
/>

Source code

Loading…

Credits

Ported from armour.vaibhavtomar.com.

License

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

0