57:I[473921,["/creators-assets/_next/static/immutable/chunks/3c-b-8ufmviux.js","/creators-assets/_next/static/immutable/chunks/2lb80c7sdmm1x.js","/creators-assets/_next/static/immutable/chunks/24qz5wotuh5hj.js","/creators-assets/_next/static/immutable/chunks/24bk4ojcoor5n.js","/creators-assets/_next/static/immutable/chunks/0j6nsovyxcqkz.js","/creators-assets/_next/static/immutable/chunks/3mwqlk6tp5l2t.js","/creators-assets/_next/static/immutable/chunks/2dvu3r_tb3ihz.js","/creators-assets/_next/static/immutable/chunks/1q7v4rdbqi_5d.js","/creators-assets/_next/static/immutable/chunks/2fw--q9y_1nc-.js","/creators-assets/_next/static/immutable/chunks/1w_rozgc2dplq.js","/creators-assets/_next/static/immutable/chunks/0dglr8x18qkm5.js","/creators-assets/_next/static/immutable/chunks/0a8vglvd9phm3.js","/creators-assets/_next/static/immutable/chunks/00hohn9l3ocx9.js","/creators-assets/_next/static/immutable/chunks/06p8bv9p94pxh.js","/creators-assets/_next/static/immutable/chunks/42u1pxaq7eeka.js","/creators-assets/_next/static/immutable/chunks/0mgwzh6o644jl.js","/creators-assets/_next/static/immutable/chunks/2bbm33yuxi64a.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/0kjwwabuczr28.js","/creators-assets/_next/static/immutable/chunks/088oy6f_9ll4s.js","/creators-assets/_next/static/immutable/chunks/22zq93dcklbwz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/3fujn21cf_mt1.js","/creators-assets/_next/static/immutable/chunks/0eljubaqaqluk.js","/creators-assets/_next/static/immutable/chunks/2ch5kewqiwntv.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/3g7os-hf6q3tv.js","/creators-assets/_next/static/immutable/chunks/1e3mmtw6okz19.js","/creators-assets/_next/static/immutable/chunks/3fcb65_46-jt7.js","/creators-assets/_next/static/immutable/chunks/0toe1wcov_38e.js","/creators-assets/_next/static/immutable/chunks/28h79imj-g45k.js","/creators-assets/_next/static/immutable/chunks/2x3imtac9af--.js","/creators-assets/_next/static/immutable/chunks/2t6l_zgbmmx8u.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3nd1mzwm7q_f7.js","/creators-assets/_next/static/immutable/chunks/0_ulklfcrp-s3.js","/creators-assets/_next/static/immutable/chunks/3-uff2nrv83hw.js","/creators-assets/_next/static/immutable/chunks/0alicgkopr9se.js","/creators-assets/_next/static/immutable/chunks/0-kepukl8ldjk.js","/creators-assets/_next/static/immutable/chunks/2-u6q7fsgfx0e.js"],"PostDetailCard"] 58:T955,

Media Runway sends your images and videos flying toward the viewer on two rails that open from a central vanishing point, like a 3D corridor or tunnel. Cards are born deep in the distance, sweep outward and grow as they rush past, in a seamless loop that never shows a gap.

Made for Hero Sections

Drop it behind a headline and let your work lead. Mirror both sides for a symmetrical stream, or split them to show different media left and right. Scale it, shape it with perspective, spread, curve, and turn, set the card ratio, radius, and fill, and choose how it reacts on hover.

Key Features

Motion

Seamless infinite loop, already full on the first frame
Toward or Away direction, adjustable duration and card count
Intro: once media is loaded, the runway fades in and stretches out of the vanishing point
Optional hover: eases down to the speed you set, or to a full stop
Your whole list streams through, not just the first items

Media

Mix images and videos in one list
Optional poster image per video
Mirror or Split sides, with an optional separate list for the left rail

Layout and Style

Fit height: the component sizes itself to the runway, nothing gets clipped
Scale the whole runway in one move, without changing its shape
Perspective, exit size, spread, curve, and turn controls
Card ratio, native corner radius, and fill color
Transparent background, sits on any section

Performance

Images and posters preload first, so no card ever flies by empty
Videos only load once the runway enters the viewport
Animation and videos pause when scrolled out of view or with Reduced Motion

How to Set Up

Drag Media Runway onto your canvas
Add your images and videos under Media
Pick Mirror or Split, then shape the Runway and Card settings
Publish

Refund Policy

All sales of digital products are final and non-refundable. Questions? Contact hellonostromostudio@gmail.com before purchasing. Enjoy!

54:[["$","$L57",null,{"post":{"id":"01a14a54-d14b-765e-9f68-b27c42b1413f","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"042e00c3-0e8c-49d7-b0d9-458a683d2cbe","name":"Nostromo Studio","slug":"nostromo-studio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/425429/avatar-hTmf9JbHiQIYsivHT2ttWZ6KjESn4J.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"cPlnFWXT91mS16iKOnDK","resolved":true,"title":"Media Runway","body":"$58","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Media Runway","marks":[{"type":"bold"}]},{"type":"text","text":" sends your images and videos flying toward the viewer on two rails that open from a central vanishing point, like a 3D corridor or tunnel. Cards are born deep in the distance, sweep outward and grow as they rush past, in a seamless loop that never shows a gap."}]},{"type":"customHeading","attrs":{"level":1},"content":[{"type":"text","text":"Made for Hero Sections"}]},{"type":"paragraph","content":[{"type":"text","text":"Drop it behind a headline and let your work lead. Mirror both sides for a symmetrical stream, or split them to show different media left and right. Scale it, shape it with perspective, spread, curve, and turn, set the card ratio, radius, and fill, and choose how it reacts on hover."}]},{"type":"customHeading","attrs":{"level":1},"content":[{"type":"text","text":"Key Features"}]},{"type":"customHeading","attrs":{"level":2},"content":[{"type":"text","text":"Motion"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Seamless infinite loop, already full on the first frame"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Toward or Away direction, adjustable duration and card count"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Intro: once media is loaded, the runway fades in and stretches out of the vanishing point"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Optional hover: eases down to the speed you set, or to a full stop"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Your whole list streams through, not just the first items"}]}]}]},{"type":"customHeading","attrs":{"level":2},"content":[{"type":"text","text":"Media"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Mix images and videos in one list"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Optional poster image per video"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Mirror or Split sides, with an optional separate list for the left rail"}]}]}]},{"type":"customHeading","attrs":{"level":2},"content":[{"type":"text","text":"Layout and Style"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Fit height: the component sizes itself to the runway, nothing gets clipped"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Scale the whole runway in one move, without changing its shape"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Perspective, exit size, spread, curve, and turn controls"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Card ratio, native corner radius, and fill color"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Transparent background, sits on any section"}]}]}]},{"type":"customHeading","attrs":{"level":2},"content":[{"type":"text","text":"Performance"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Images and posters preload first, so no card ever flies by empty"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Videos only load once the runway enters the viewport"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Animation and videos pause when scrolled out of view or with Reduced Motion"}]}]}]},{"type":"customHeading","attrs":{"level":1},"content":[{"type":"text","text":"How to Set Up"}]},{"type":"orderedList","attrs":{"start":1,"type":null},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Drag Media Runway onto your canvas"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Add your images and videos under Media"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Pick Mirror or Split, then shape the Runway and Card settings"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Publish"}]}]}]},{"type":"customHeading","attrs":{"level":1},"content":[{"type":"text","text":"Refund Policy"}]},{"type":"paragraph","content":[{"type":"text","text":"All sales of digital products are final and non-refundable. Questions? Contact "},{"type":"text","text":"hellonostromostudio@gmail.com","marks":[{"type":"link","attrs":{"href":"mailto:hellonostromostudio@gmail.com","target":"_blank","rel":"noopener noreferrer nofollow"}}]},{"type":"text","text":" before purchasing. Enjoy!"}]}]},"introduction":"A 3D tunnel of images and videos","slug":"media-runway","author":{"framerUserId":"042e00c3-0e8c-49d7-b0d9-458a683d2cbe","name":"Nostromo Studio","slug":"nostromo-studio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/425429/avatar-hTmf9JbHiQIYsivHT2ttWZ6KjESn4J.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/042e00c3-0e8c-49d7-b0d9-458a683d2cbe/01a14a54-acaa-773f-aee3-bc8263aa5d0c.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-10-17T14:47:14.443Z","updatedAt":"2026-10-19T13:06:44.584Z","publishedAt":"2026-10-17T14:47:14.439Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/MediaRunway-icswhh.js@osAy616FCPZRUE7cUhoo","previewUrl":"https://mediarunway.framer.website/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"8f93ccfe-423c-47f2-b8ae-79e9e132012f","name":"Carousels","slug":"carousels"}],"lastSaveId":"osAy616FCPZRUE7cUhoo","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":0,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-10-17T14:47:15.019Z","updatedAt":"2026-10-17T14:47:15.019Z","reported":false,"type":"post"}}],"$L59"]

Suggested for you