53:I[267044,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/00zhqb0zqgnk3.js","/creators-assets/_next/static/immutable/chunks/415hvdruki4ud.js","/creators-assets/_next/static/immutable/chunks/3_vedwwik9kwx.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/1ktf0sm5sxqup.js","/creators-assets/_next/static/immutable/chunks/1dzfckym0nghc.js","/creators-assets/_next/static/immutable/chunks/1vr_3-vdcf0mn.js","/creators-assets/_next/static/immutable/chunks/1cuuzi60s_xh3.js","/creators-assets/_next/static/immutable/chunks/1e4nq30y40mt7.js","/creators-assets/_next/static/immutable/chunks/0ccg8j7qcn1bd.js","/creators-assets/_next/static/immutable/chunks/1gop2naj8q_bx.js","/creators-assets/_next/static/immutable/chunks/0a1gpscfztyde.js","/creators-assets/_next/static/immutable/chunks/2k_aekaeyljm2.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/3-aog2q7la1hs.js","/creators-assets/_next/static/immutable/chunks/41lhc7ix2xugk.js","/creators-assets/_next/static/immutable/chunks/0xd4yj8g3g-ci.js","/creators-assets/_next/static/immutable/chunks/0mxxs4-__ynew.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/43klns5g0wl80.js","/creators-assets/_next/static/immutable/chunks/1o0ogv90oxalc.js","/creators-assets/_next/static/immutable/chunks/10ydirfi9qu21.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/0xit-z5qwqul7.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/32cfyvu36_37j.js","/creators-assets/_next/static/immutable/chunks/1kws7r6etoq5-.js","/creators-assets/_next/static/immutable/chunks/3um5ae_udgvki.js","/creators-assets/_next/static/immutable/chunks/2p4sqhvmasp9s.js","/creators-assets/_next/static/immutable/chunks/2zlizmh1083ez.js","/creators-assets/_next/static/immutable/chunks/13mks9ztnefhj.js","/creators-assets/_next/static/immutable/chunks/1czq4md204jhl.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/3ym52__dqzver.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3lqyfto2688hr.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/1yafild1hsc0a.js","/creators-assets/_next/static/immutable/chunks/2rdaqkxiyeq_6.js"],"S"] 54: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

55:T4d9,

DetailsASCII Formatter Pro is a creative Framer component for styling, animating, and interacting with text-based compositions. Use it for ASCII art, experimental typography, terminal-inspired layouts, animated headlines, editorial motion studies, and other text-driven visuals.

It works with plain text ASCII content, whether created manually or pasted in from a generated .txt export. From static compositions to multi-frame sequences, it gives you a flexible way to build dynamic text experiences directly in Framer.

Features

Single-frame and sequence-based text support
Supports manually written or pasted ASCII text
Hover effects for interactive motion
Appear effects for entrances and frame changes
Hover Play, Auto Play, and Viewport Enter playback
Loop controls for continuous motion
Typography controls for spacing and layout refinement
Great for ASCII art and general text-based compositions

Who it’s forMade for Framer creators, designers, and creative developers who want to turn text into a more expressive visual medium.

56:Tc98,

Overview

Motion Ambient is a CMS-friendly Framer component for building interactive media cards with hover-triggered slideshows, ambient lighting, tilt, and responsive reveal behavior.

Designed for portfolios, editorial layouts, featured stories, and creative showcases, it supports both CMS-bound content and manually uploaded media. Use it to create more expressive thumbnails, hero cards, and media-driven layouts without building the interaction system from scratch.

What it does

Motion Ambient turns a static media card into a more dynamic preview experience. On hover or focus, cards can trigger slideshow playback, ambient lighting, border changes, tilt, and overlay motion. On mobile and tablet, the component can reveal content when the card enters view for a more touch-friendly experience.

Features

CMS-friendly Framer component
Supports both image and video content
Works with CMS variables or manual media uploads
Hover-triggered slideshow behavior
Multiple transition styles including fade, instant, slide, and push
Adjustable slideshow duration and timing
Ambient lighting with blur, spread, intensity, saturate, and brightness controls
3D tilt controls
Overlay can follow the cursor or remain stationary
Border radius, border color, and border visibility controls
Supports CMS color variables for border styling
Aspect ratio and media alignment controls
Video mute / unmute behavior on focus
Responsive reveal behavior for mobile and tablet
Flexible enough for grids, hero cards, and split compositions

Perfect for

Creative agencies
Photographers
Videographers
Design portfolios
Editorial and fashion sites
Brand showcases
Campaign landing pages
Art direction case studies
CMS-driven galleries and collections

Motion Ambient is built for designers who want more atmosphere and motion in their content cards while keeping the setup flexible. It gives you a wide range of controls for interaction, media presentation, and styling, making it easy to adapt across different layouts and visual directions.

Live demo

See the component in action:

https://cmsmotion-demo.framer.website/motion-ambient-demo

framer component being demonstrated

52:["$","$L53",null,{"value":{"fallback":{"$inf$activity-creator-7e6cd64f-eee2-47a3-97be-0bc9e75ecd2d-all:/unified/creator/7e6cd64f-eee2-47a3-97be-0bc9e75ecd2d/activity/":[{"data":[],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}],"$inf$posts:7e6cd64f-eee2-47a3-97be-0bc9e75ecd2d:/unified/posts/?creator=7e6cd64f-eee2-47a3-97be-0bc9e75ecd2d&with=reposts":[{"data":[{"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":"$54","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"},{"id":"019d7405-0127-7d0e-aff9-145ae1642f58","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":"mjgffaCzUQVvGVXyJkhz","resolved":true,"title":"Ascii Formatter Pro","body":"$55","bodyJson":null,"introduction":"Style, animate, and interact with ASCII ","slug":"ascii-formatter-pro","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/mjgffaCzUQVvGVXyJkhz/ascii-formatter-pro-YhAwkryWwF34SQyMdFVmn1L7JhA8Gq","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-03-22T18:26:29.500Z","updatedAt":"2026-06-16T17:58:29.607Z","publishedAt":"2026-04-09T20:52:58.279Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://asciiformatterpro.framer.website/","price":"4","paymentUrl":"https://buy.polar.sh/polar_cl_qZE7rVR4aeRIKl1jA3AgqZwGPnFMDijfhvcu92M8Ac7","workshop":false,"categories":[{"id":"7fe42fdd-1b16-4f5a-93b8-009488614de8","name":"Text","slug":"text"}],"lastSaveId":"NBfFoT0I05wYWBxmLSkj","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":22,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-04-09T20:52:58.279Z","updatedAt":"2026-04-09T20:52:58.279Z"},{"id":"019d68c0-ac81-7898-b6f7-040993e3d21c","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":"aoRmfYsUolfhYRkd7yO1","resolved":true,"title":"Motion Ambient","body":"$56","bodyJson":null,"introduction":"CMS slideshow card with glow","slug":"motion-ambient","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/aoRmfYsUolfhYRkd7yO1/motion-ambient-5NZf8LXE85FGe2GjUcqrRxFNdPB4qw","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-03-18T05:17:01.039Z","updatedAt":"2026-04-07T09:37:41.894Z","publishedAt":"2026-04-07T16:22:30.785Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://cmsmotion-demo.framer.website/","price":"10","paymentUrl":"https://buy.polar.sh/polar_cl_ddmIAmqrANLwL69p47VKnfHGGAKgWW54l33VJ2XwQdU","workshop":false,"categories":[{"id":"c3e183d1-597a-4479-8a6f-244ae3c96f40","name":"Cards","slug":"cards"}],"lastSaveId":"Cbje6Xz3PSHZ7IU6FFN6","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":3,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-04-07T16:22:30.785Z","updatedAt":"2026-04-07T16:22:30.785Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}]}},"children":"$L57"}]