50:I[267044,["/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/3z6ke99nzr4_e.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/1fkcqskfw4hol.js","/creators-assets/_next/static/immutable/chunks/3ixl4aqv6ylo7.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/2di2v55rtz-8i.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/00owjoob9gqs9.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js"],"S"] 51:T6a3,

3D Flip Card Component

Transform your Framer projects with this premium interactive card component featuring smooth animations and engaging hover effects.

Key Features

Interactive 3D Effects

Magnetic hover with smooth tilt animation
Dynamic lift effect that follows your cursor
Realistic shadows that respond to movement
Buttery smooth flip animation on click

Fully Customizable

Adjustable card dimensions (width & height)
Front: Image with fit/fill options
Back: Custom text with full typography control
Configurable corner radius
Custom colors for text and background

Fine-tune Interactions

Control tilt intensity (0-40°)
Adjust lift amount for depth effect
Customize shadow size and color
Scroll support for long text content

Perfect For

Portfolio showcases
Product cards
Team member profiles
Feature highlights
Interactive galleries
Modern landing pages

Easy to Use

Simply drag the component to your canvas and customize via the properties panel. No coding required!

All effects are optimized for smooth performance across devices.

52:T7d1,

Cursor-Reactive Hero – Interactive Section

Bring your landing pages and portfolios to life with a smooth, cursor-reactive hero. Add depth, motion, and subtle parallax for a modern, immersive experience.

Resize the component frame to control the hero size. Width automatically fills the container.

✨ Key Features

Motion & Effects

Cursor-reactive motion with adjustable intensity (Low / Medium / High)
Touch-device friendly with static fallback

Layout & Typography

9 content position options (top-left, center, bottom-right, etc.)
Independent text alignment (left, center, right)
Adjustable spacing: title-subtitle gap & max width control
Full font customization with extended controls (family, size, weight, line height)
Precise control over text positioning and spacing

Visual Customization

5 image size modes: Cover, Contain, Original Size, Fit to Image, Custom
Background options: Solid color, Linear gradient, Radial gradient
Text color customization
Optional hero image with subtle parallax

Technical

Fully responsive & resizable
No external dependencies
Clean, production-ready code

Props

💡 Use Cases

Landing pages for products, apps, or portfolios
Personal portfolios and creative projects
Marketing pages and promotional sites
Experimental UI / motion studies

4f:["$","$L50",null,{"value":{"fallback":{"$inf$activity-creator-3fb46fc6-9a96-4914-816c-a279e07eee78-all:/unified/creator/3fb46fc6-9a96-4914-816c-a279e07eee78/activity/":[{"data":[],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}],"$inf$posts:3fb46fc6-9a96-4914-816c-a279e07eee78:/unified/posts/?creator=3fb46fc6-9a96-4914-816c-a279e07eee78&with=reposts":[{"data":[{"id":"019c66e6-1661-75b8-a4c7-c2ae477d45ba","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"3fb46fc6-9a96-4914-816c-a279e07eee78","name":"Boyoon Labs","slug":"boyoon-labs","avatar":null,"followed":false,"followsYou":false},"media":[],"resources":[{"id":"YzbJClfjGA2C46xsi5bm","resolved":true,"title":"3D Hover Flip Card","body":"$51","bodyJson":null,"introduction":"Interactive card with hover tilt & flip","slug":"3d-hover-flip-card","author":{"framerUserId":"3fb46fc6-9a96-4914-816c-a279e07eee78","name":"Boyoon Labs","slug":"boyoon-labs","avatar":null,"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/YzbJClfjGA2C46xsi5bm/3d-hover-flip-card-3WSbLKagfvruMLGBi47l6Zrz4Wlsvn","metadata":{"tint":{"h":240,"s":26,"l":65},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-02-05T07:14:08.289Z","updatedAt":"2026-03-04T00:20:33.507Z","publishedAt":"2026-02-16T14:41:20.993Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://boyoonlabs-3d-flip-card.framer.website/","price":"3","paymentUrl":"https://buy.polar.sh/polar_cl_zNxlCw7pQFh4XPlRBsgDexC3nLTUv5sPcS2do17Ro2t","workshop":false,"categories":[{"id":"c3e183d1-597a-4479-8a6f-244ae3c96f40","name":"Cards","slug":"cards"}],"lastSaveId":"SVZ9itP5ERjTcJxc4kQ9","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":3,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-02-16T14:41:20.993Z","updatedAt":"2026-02-16T14:41:20.993Z"},{"id":"019c5719-faf8-7be5-8272-b458e0e59bba","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"3fb46fc6-9a96-4914-816c-a279e07eee78","name":"Boyoon Labs","slug":"boyoon-labs","avatar":null,"followed":false,"followsYou":false},"media":[],"resources":[{"id":"KUJElA7kTVs4z6l5qkxJ","resolved":true,"title":"Cursor Reactive Hero","body":"$52","bodyJson":null,"introduction":"Cursor-reactive interactive hero section","slug":"cursor-reactive-hero","author":{"framerUserId":"3fb46fc6-9a96-4914-816c-a279e07eee78","name":"Boyoon Labs","slug":"boyoon-labs","avatar":null,"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/KUJElA7kTVs4z6l5qkxJ/cursor-reactive-hero-0SJNDb24WjNtKynCNTSXpZ0ablLmAZ","metadata":{"tint":{"h":18,"s":94,"l":28},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-01-29T07:12:41.568Z","updatedAt":"2026-03-03T05:48:51.543Z","publishedAt":"2026-02-13T13:04:06.392Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://sub.chujiqiqi.com/m/CursorInteractiveHero-m34vg0.js@QU9O5xU947SGtDJ5G00g","previewUrl":"https://boyoonlabs-cursor-reactive-text.framer.website/cursor-reactive-hero","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"5c50a4d9-4405-49ca-8956-4909a204480d","name":"Sections","slug":"sections"}],"lastSaveId":"QU9O5xU947SGtDJ5G00g","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":18,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-02-13T13:04:06.392Z","updatedAt":"2026-02-13T13:04:06.392Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}]}},"children":"$L53"}]