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

DepthMotionStack is a layered motion component for building scenes that feel dimensional, reactive, and alive. It is designed for portal effects, storytelling moments, hover reveals, hologram cards, atmospheric hero sections, and interactive compositions that go beyond a standard parallax stack.

Built for flexibility, it supports foreground, background, and multiple mid layers, with controls for depth, opacity states, blend modes, scaling, direction, clipping, masking, tilt, smoothing, and staggered activation. Whether you are building a cinematic portal, an interactive storybook scene, or a motion-rich visual card, DepthMotionStack gives you a polished way to create depth-driven experiences inside Framer.

Best suited for image-based layered artwork, stylized compositions, and storytelling scenes where motion and spatial response help bring the visual to life.

Features

Interactive layered depth and parallax
Foreground, background, and multiple mid-layer support
Touch interaction for tablet and mobile
Idle and active opacity controls
Per-layer blend modes and scaling
Global and per-layer direction controls
Activation modes for hover, click, and always-on behavior
Staggered layer activation for cascading reveals
Optional tilt interaction
Cursor and auto motion modes
Clip-to-foreground effect for hologram-style compositions
Custom alpha mask support for organic clipping shapes
Adjustable clip radius
Smoothing controls for softer motion
Responsive source support for foreground and background layers
Great for portals, storytelling, hero scenes, hover reveals, and atmospheric cards

Best for

Interactive hero sections
Storybook-inspired demos
Portal and hologram effects
Cinematic layered artwork
Hover reveals and motion-rich cards
Experimental landing pages
Editorial and narrative compositions

Notes

Best results come from rasterized artwork or simple layered source compositions
Especially effective for scenes built with intentional foreground, midground, and background separation

5a:[["$","$L5d",null,{"post":{"id":"019eab78-4260-7fef-868e-31d9fc358f7d","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"7e6cd64f-eee2-47a3-97be-0bc9e75ecd2d","name":"mnfst-studio","slug":"mnfst-studio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/871013/avatar-5rNBDBRPPjjnfF1JWoLU8kxlvL1k0z.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"fl6J6f7Yt4ZVGd7MS5ba","resolved":true,"title":"DepthMotionStack","body":"$5e","bodyJson":null,"introduction":"Layered depth, parallax, and motion","slug":"depthmotionstack","author":{"framerUserId":"7e6cd64f-eee2-47a3-97be-0bc9e75ecd2d","name":"mnfst-studio","slug":"mnfst-studio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/871013/avatar-5rNBDBRPPjjnfF1JWoLU8kxlvL1k0z.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/fl6J6f7Yt4ZVGd7MS5ba/depthmotionstack-YRxi130XLlxcdmuW8e8exCe7E2joto","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-03-27T07:07:14.976Z","updatedAt":"2026-06-09T08:16:00.944Z","publishedAt":"2026-06-09T08:20:45.792Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://depthmotionstack.framer.website/","price":"7","paymentUrl":"https://buy.polar.sh/polar_cl_GgTbk4qiOQgC9oigzsqzfk07glKZwbPRiKjnp0PGuFZ","workshop":false,"categories":[{"id":"323e97d6-f443-488c-8661-794a9a83a20f","name":"Effects","slug":"effects"}],"lastSaveId":"6e01msi0uumrfbASaEby","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-06-09T08:20:45.792Z","updatedAt":"2026-06-09T08:20:45.792Z","reported":false}}],"$L5f"]

Suggested for you