Paper Curtains

Paper Curtains places a row of colored strips over your text that peel away with a satisfying, physics-based animation the moment they scroll into view.

Paper Curtains places a row of colored strips over your text that peel away with a satisfying, physics-based animation the moment they scroll into view. It's a simple idea executed with polish—perfect for hero headings, pull quotes, or any text that deserves an entrance. Mix and match to create dozens of unique reveal styles: - Fall Directions : Down, Up, Split, Alternating, and Scatter Drop—each with its own 3D rotation and physics feel. - Stagger Patterns : Left to Right, Right to Left, Center Out, Edges In, or Random—control the order the strips peel off. Every visual aspect of the curtains is exposed in the Framer property panel: - Solid or Gradient Fill : Switch between a flat color and a configurable linear gradient with start color, end color, and angle controls. - Border Styling : Add borders to each strip with independent width, color, and style (solid, dashed, or dotted) controls. - Corner Radius : Round the corners of each strip from sharp rectangles to soft pills. - Curtain Count & Oversize : Fine-tune how many strips cover the text and how far they extend beyond the text bounds. Uses Framer's native extended font controls—set the family, weight, size, line height, letter spacing, and alignment directly in the property panel. No CSS overrides needed. - Preview Curtains Toggle : Show curtains at rest on the canvas so you can style colors, gradients, and borders visually—then hide them to check the revealed text layout. - Spring Physics : Powered by Framer Motion springs for smooth, hardware-accelerated animation. - Scroll-Triggered : Uses `useInView` with a `once` trigger so the animation fires exactly once and the strips are removed from the DOM after they fall.

text reveal animation.