purrfect uiComponents

Scroll down

Let's work together

Curtain reveal

A panel the page lifts away from as you scroll, like a curtain.

Behaviour

  • Reduced motion: nothing changes, there is no animation; the panel is uncovered by scrolling itself.
  • As you scroll down the page lifts away and uncovers the panel, which stays put underneath.
  • A clipped box holds a sticky panel: no JavaScript, no scroll listener, server rendered. Put it last on the page.

Props

PropTypeDescription
heightstringdefault "100svh"Height of the revealed panel, any CSS length.
classNamestringClasses for the panel (background, padding, colour). bg-foreground text-background by default.
frameClassNamestringClasses for the outer box in the page flow.

Installation

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

How to use

import { CurtainReveal } from "@/components/ui/curtain-reveal";

<main>{/* the page */}</main>
<CurtainReveal className="p-12">
  <h2 className="text-6xl">Let's work together</h2>
</CurtainReveal>

Source code

Loading…

Credits

Ported from vaibhavtomar.com.

License

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

0