5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:T8f4,

### A Dramatic Scroll Reveal for Text

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.

### 5 Fall Directions × 5 Stagger Patterns

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.

### Full Visual Customization

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.

### Full Font Control

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.

### Designer-Friendly Canvas Tools

- 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.

### Performant & Production Ready

- 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.

5a:[["$","$L5d",null,{"post":{"id":"019dd0d3-1e4c-78ab-aeb2-0cfb8d942512","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"ff3d8eca-ae13-4845-bd7e-9c26d1085c71","name":"Jirei","slug":"jirei","avatar":null,"followed":false,"followsYou":false},"media":[],"resources":[{"id":"6mwFhzs8XPWpzJY3rR85","resolved":true,"title":"Paper Curtains","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"### A Dramatic Scroll Reveal for Text","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"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."}]},{"type":"paragraph","content":[{"type":"text","text":"### 5 Fall Directions × 5 Stagger Patterns","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Mix and match to create dozens of unique reveal styles:"}]},{"type":"paragraph","content":[{"type":"text","text":"- "},{"type":"text","text":"Fall Directions","marks":[{"type":"bold"}]},{"type":"text","text":": Down, Up, Split, Alternating, and Scatter Drop—each with its own 3D rotation and physics feel."}]},{"type":"paragraph","content":[{"type":"text","text":"- "},{"type":"text","text":"Stagger Patterns","marks":[{"type":"bold"}]},{"type":"text","text":": Left to Right, Right to Left, Center Out, Edges In, or Random—control the order the strips peel off."}]},{"type":"paragraph","content":[{"type":"text","text":"### Full Visual Customization","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Every visual aspect of the curtains is exposed in the Framer property panel:"}]},{"type":"paragraph","content":[{"type":"text","text":"- "},{"type":"text","text":"Solid or Gradient Fill","marks":[{"type":"bold"}]},{"type":"text","text":": Switch between a flat color and a configurable linear gradient with start color, end color, and angle controls."}]},{"type":"paragraph","content":[{"type":"text","text":"- "},{"type":"text","text":"Border Styling","marks":[{"type":"bold"}]},{"type":"text","text":": Add borders to each strip with independent width, color, and style (solid, dashed, or dotted) controls."}]},{"type":"paragraph","content":[{"type":"text","text":"- "},{"type":"text","text":"Corner Radius","marks":[{"type":"bold"}]},{"type":"text","text":": Round the corners of each strip from sharp rectangles to soft pills."}]},{"type":"paragraph","content":[{"type":"text","text":"- "},{"type":"text","text":"Curtain Count & Oversize","marks":[{"type":"bold"}]},{"type":"text","text":": Fine-tune how many strips cover the text and how far they extend beyond the text bounds."}]},{"type":"paragraph","content":[{"type":"text","text":"### Full Font Control","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"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."}]},{"type":"paragraph","content":[{"type":"text","text":"### Designer-Friendly Canvas Tools","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"- "},{"type":"text","text":"Preview Curtains Toggle","marks":[{"type":"bold"}]},{"type":"text","text":": 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."}]},{"type":"paragraph","content":[{"type":"text","text":"### Performant & Production Ready","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"- "},{"type":"text","text":"Spring Physics","marks":[{"type":"bold"}]},{"type":"text","text":": Powered by Framer Motion springs for smooth, hardware-accelerated animation."}]},{"type":"paragraph","content":[{"type":"text","text":"- "},{"type":"text","text":"Scroll-Triggered","marks":[{"type":"bold"}]},{"type":"text","text":": Uses `useInView` with a `once` trigger so the animation fires exactly once and the strips are removed from the DOM after they fall."}]}]},"introduction":"text reveal animation.","slug":"paper-curtains","author":{"framerUserId":"ff3d8eca-ae13-4845-bd7e-9c26d1085c71","name":"Jirei","slug":"jirei","avatar":null,"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/6mwFhzs8XPWpzJY3rR85/paper-curtains-Rakw2mfoIEI0qrXlUvnkNBp1JcRUuZ","metadata":{"tint":{"h":0,"s":77,"l":67},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-04-21T09:41:52.898Z","updatedAt":"2026-07-30T21:29:27.355Z","publishedAt":"2026-04-27T21:23:10.028Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://sub.chujiqiqi.com/m/TextPaperCurtains-fc2PHM.js@NuMIUvosD7AaKvVUQnKi","previewUrl":"https://angelic-population-386007.framer.app/preview","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"7fe42fdd-1b16-4f5a-93b8-009488614de8","name":"Text","slug":"text"}],"lastSaveId":"NuMIUvosD7AaKvVUQnKi","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":4,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-04-27T21:23:10.028Z","updatedAt":"2026-04-27T21:23:10.028Z","reported":false}}],"$L5f"]

Suggested for you