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:T820,

About this Component

Drop in any image and watch it flutter on hover!

This interactive poster component for Framer transforms static images into a realistic paper simulation. With real-time physics, dynamic surface lighting, and instant cursor response, it creates a striking visual impact. Perfect for event posters, portfolios, or hero sections that demand attention.

Component Properties

- Image: The component automatically reads your uploaded image's aspect ratio on load, displaying it perfectly without any distortion.

- Motion (Hang): The top remains firmly fixed while the bottom flutters, simulating a poster pinned to a wall.

- Motion (Lift): The bottom edge lifts and flies forward, acting as if caught in a strong breeze.

- Flutter: Fine-tune the wind intensity upon hover (Default: 0.75, Max: 1.0).

- Light: Control the specular sheen. Set to 0 for a realistic matte paper finish, or increase the value for a glossy, coated look.

- Idle Sway: Control the movement when the cursor is inactive. Adding a value keeps the poster gently swaying, creating a continuous, lifelike detail even without interaction.

Use Cases

- High-Impact First Impressions: Transform plain thumbnails or hero banners into captivating interactive elements that instantly grab visitors' attention.

- Creative Showcases: A flawless fit for movie and exhibition promo sites, event landing pages, portfolio covers, and anywhere you need a powerful visual punch.

How to Install

To install the component, please copy and paste the component URL directly onto your Framer canvas.

Important Note

Please note that the animations only work in Preview mode. The component may appear paused or as an empty screen on the Framer canvas.

5a:[["$","$L5d",null,{"post":{"id":"019f61b8-d3ea-77db-8a05-c4d812d70070","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"e1547ef2-b506-47d3-85bb-942a828e4b86","name":"Mx. Bear","slug":"mxbear","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/e1547ef2-b506-47d3-85bb-942a828e4b86/nmq3d0ik","followed":false,"followsYou":false},"media":[],"resources":[{"id":"DCeT1xclCol3QV7xhIe2","resolved":true,"title":"Paper Flutter","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"customHeading","content":[{"type":"text","text":"About this Component","marks":[{"type":"bold"}]}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Drop in any image and watch it flutter on hover!"}]},{"type":"paragraph","content":[{"type":"text","text":"This interactive poster component for Framer transforms static images into a realistic paper simulation. With real-time physics, dynamic surface lighting, and instant cursor response, it creates a striking visual impact. Perfect for event posters, portfolios, or hero sections that demand attention."}]},{"type":"paragraph"},{"type":"customHeading","content":[{"type":"text","text":"Component Properties","marks":[{"type":"bold"}]}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"- "},{"type":"text","text":"Image:","marks":[{"type":"bold"}]},{"type":"text","text":" The component automatically reads your uploaded image's aspect ratio on load, displaying it perfectly without any distortion."}]},{"type":"paragraph","content":[{"type":"text","text":"- "},{"type":"text","text":"Motion (Hang):","marks":[{"type":"bold"}]},{"type":"text","text":" The top remains firmly fixed while the bottom flutters, simulating a poster pinned to a wall."}]},{"type":"paragraph","content":[{"type":"text","text":"- "},{"type":"text","text":"Motion (Lift):","marks":[{"type":"bold"}]},{"type":"text","text":" The bottom edge lifts and flies forward, acting as if caught in a strong breeze."}]},{"type":"paragraph","content":[{"type":"text","text":"- "},{"type":"text","text":"Flutter:","marks":[{"type":"bold"}]},{"type":"text","text":" Fine-tune the wind intensity upon hover (Default: 0.75, Max: 1.0)."}]},{"type":"paragraph","content":[{"type":"text","text":"- "},{"type":"text","text":"Light:","marks":[{"type":"bold"}]},{"type":"text","text":" Control the specular sheen. Set to 0 for a realistic matte paper finish, or increase the value for a glossy, coated look."}]},{"type":"paragraph","content":[{"type":"text","text":"- "},{"type":"text","text":"Idle Sway:","marks":[{"type":"bold"}]},{"type":"text","text":" Control the movement when the cursor is inactive. Adding a value keeps the poster gently swaying, creating a continuous, lifelike detail even without interaction."}]},{"type":"paragraph"},{"type":"customHeading","content":[{"type":"text","text":"Use Cases","marks":[{"type":"bold"}]}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"- "},{"type":"text","text":"High-Impact First Impressions:","marks":[{"type":"bold"}]},{"type":"text","text":" Transform plain thumbnails or hero banners into captivating interactive elements that instantly grab visitors' attention."}]},{"type":"paragraph","content":[{"type":"text","text":"- "},{"type":"text","text":"Creative Showcases:","marks":[{"type":"bold"}]},{"type":"text","text":" A flawless fit for movie and exhibition promo sites, event landing pages, portfolio covers, and anywhere you need a powerful visual punch."}]},{"type":"paragraph"},{"type":"customHeading","content":[{"type":"text","text":"How to Install","marks":[{"type":"bold"}]}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"To install the component, please copy and paste the component URL directly onto your Framer canvas."}]},{"type":"paragraph"},{"type":"customHeading","content":[{"type":"text","text":"Important Note","marks":[{"type":"bold"}]}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Please note that the animations only work in Preview mode. The component may appear paused or as an empty screen on the Framer canvas."}]}]},"introduction":"Mx. Bear","slug":"paper-flutter","author":{"framerUserId":"e1547ef2-b506-47d3-85bb-942a828e4b86","name":"Mx. Bear","slug":"mxbear","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/e1547ef2-b506-47d3-85bb-942a828e4b86/nmq3d0ik","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/e1547ef2-b506-47d3-85bb-942a828e4b86/019f61b8-bf26-7358-bace-50a8e6c89b1f.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-07-14T17:42:10.298Z","updatedAt":"2026-08-13T12:47:58.059Z","publishedAt":"2026-07-14T17:42:10.295Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://inspired-darlings-011796.framer.app/paper-flutter","price":"5","paymentUrl":"https://buy.polar.sh/polar_cl_zPhVI3yj1MzNehTwvEgDNumaE68rdctOyoPIM4ZA20d","workshop":false,"categories":[{"id":"323e97d6-f443-488c-8661-794a9a83a20f","name":"Effects","slug":"effects"}],"lastSaveId":"3rB6SkGjHhUx6kNpekpQ","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":7,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-07-14T17:42:10.666Z","updatedAt":"2026-07-14T17:42:10.666Z","reported":false}}],"$L5f"]

Suggested for you