5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/00zhqb0zqgnk3.js","/creators-assets/_next/static/immutable/chunks/0jb7r9vkvbp9b.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/3y8qjjd_v0fjc.js","/creators-assets/_next/static/immutable/chunks/0_aohzx8_x6oa.js","/creators-assets/_next/static/immutable/chunks/2e6uhasjhfbil.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/0ccg8j7qcn1bd.js","/creators-assets/_next/static/immutable/chunks/1o0ogv90oxalc.js","/creators-assets/_next/static/immutable/chunks/0a1gpscfztyde.js","/creators-assets/_next/static/immutable/chunks/0t3q4gzvfui5n.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/41lhc7ix2xugk.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/30smfjlh8o71p.js","/creators-assets/_next/static/immutable/chunks/3-aog2q7la1hs.js","/creators-assets/_next/static/immutable/chunks/2a2w_2tavj0_e.js","/creators-assets/_next/static/immutable/chunks/3f-jmjjx_9lv_.js","/creators-assets/_next/static/immutable/chunks/10ydirfi9qu21.js","/creators-assets/_next/static/immutable/chunks/0xd4yj8g3g-ci.js","/creators-assets/_next/static/immutable/chunks/0lmmu21lg5-zj.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/05jm9t-fm5ei_.js","/creators-assets/_next/static/immutable/chunks/1pd9j9dvaikmb.js","/creators-assets/_next/static/immutable/chunks/0rfcd366io6r9.js","/creators-assets/_next/static/immutable/chunks/2jl0sg8984bmg.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2q-c5-h7837do.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/2ee50z0bknh40.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/2k4fp8uwg758i.js","/creators-assets/_next/static/immutable/chunks/1dzckq15yxafa.js","/creators-assets/_next/static/immutable/chunks/0g9mmnya96tz6.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:T6e9,

Tokyo Skyline Pro is a scroll-driven video hero. The visitor starts inside a room at sunset; scrolling pushes the camera through the window and out over the city. At the end your brand mark forms in the sky and the skyline steps in front of it, so the buildings overlap the letters.

Everything is editable from the properties panel: video, mobile video, poster, skyline cutout, title, brand mark, navbar links, colors and scroll length. Use the included Tokyo footage or your own video.

Features

- Scroll scrubs the video forward and backward, frame by frame

- Depth reveal: brand mark behind a transparent skyline cutout

- Glass navbar with your own links

- Optional vertical video for phones, vertical brand mark on small screens

- Self-contained: the page scrolls normally, no global styles, nothing outside the component is touched

- Loads reliably on Safari and iOS, with a poster until the first frame is ready

- Respects reduced motion

- Lightweight still preview in the editor

Includes the Tokyo footage in three encodes (1080p, 720p, vertical), the poster, the skyline cutout, an install guide with the encoding recipe for your own video, and a commercial license.

License: the Marketplace badge reads "Single-Use", but this component comes with a broader license, included in the download. One license covers one person or one company and can be used in unlimited projects, personal or for clients, including commercial ones. Reselling or redistributing the component or its media is not allowed.

The video footage and skyline artwork were created with generative AI tools.

Support: guglielmo.dev@proton.me

5a:[["$","$L5d",null,{"post":{"id":"01a0fde4-4791-74ce-bf08-6dc937bd51ab","title":null,"body":"

New: Scroll Video Hero. Scroll through the window and over Tokyo at sunset, with your brand mark behind the skyline. Demo: https://tokyoskyline.framer.website

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"New: Scroll Video Hero. Scroll through the window and over Tokyo at sunset, with your brand mark behind the skyline. Demo: "},{"type":"text","text":"https://tokyoskyline.framer.website","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://tokyoskyline.framer.website","target":"_blank"}}]}]}]},"author":{"framerUserId":"804c6d57-adef-4494-9f6d-d9bbfdfe54fa","name":"Guglielmo Giannattasio","slug":"guglielmo-giannattasio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/2816290/6wsgMNpAD-q35ycKzLn90xa1pn4sEu2PrmeGFNPs","followed":false,"followsYou":false},"media":[],"resources":[{"id":"LFhEiVowFtpPq03EEOvt","resolved":true,"title":"Scroll Video Reveal","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Tokyo Skyline Pro is a scroll-driven video hero. The visitor starts inside a room at sunset; scrolling pushes the camera through the window and out over the city. At the end your brand mark forms in the sky and the skyline steps in front of it, so the buildings overlap the letters."}]},{"type":"paragraph","content":[{"type":"text","text":"Everything is editable from the properties panel: video, mobile video, poster, skyline cutout, title, brand mark, navbar links, colors and scroll length. Use the included Tokyo footage or your own video."}]},{"type":"paragraph","content":[{"type":"text","text":"Features","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"- Scroll scrubs the video forward and backward, frame by frame"}]},{"type":"paragraph","content":[{"type":"text","text":"- Depth reveal: brand mark behind a transparent skyline cutout"}]},{"type":"paragraph","content":[{"type":"text","text":"- Glass navbar with your own links"}]},{"type":"paragraph","content":[{"type":"text","text":"- Optional vertical video for phones, vertical brand mark on small screens"}]},{"type":"paragraph","content":[{"type":"text","text":"- Self-contained: the page scrolls normally, no global styles, nothing outside the component is touched"}]},{"type":"paragraph","content":[{"type":"text","text":"- Loads reliably on Safari and iOS, with a poster until the first frame is ready"}]},{"type":"paragraph","content":[{"type":"text","text":"- Respects reduced motion"}]},{"type":"paragraph","content":[{"type":"text","text":"- Lightweight still preview in the editor"}]},{"type":"paragraph","content":[{"type":"text","text":"Includes the Tokyo footage in three encodes (1080p, 720p, vertical), the poster, the skyline cutout, an install guide with the encoding recipe for your own video, and a commercial license."}]},{"type":"paragraph","content":[{"type":"text","text":"License: the Marketplace badge reads \"Single-Use\", but this component comes with a broader license, included in the download. One license covers one person or one company and can be used in unlimited projects, personal or for clients, including commercial ones. Reselling or redistributing the component or its media is not allowed.","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"type":"text","text":"The video footage and skyline artwork were created with generative AI tools.","marks":[{"type":"italic"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Support: guglielmo.dev@proton.me","marks":[{"type":"code"}]}]}]},"introduction":"Tokyo Skyline · depth reveal","slug":"scroll-video-reveal","author":{"framerUserId":"804c6d57-adef-4494-9f6d-d9bbfdfe54fa","name":"Guglielmo Giannattasio","slug":"guglielmo-giannattasio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/2816290/6wsgMNpAD-q35ycKzLn90xa1pn4sEu2PrmeGFNPs","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/804c6d57-adef-4494-9f6d-d9bbfdfe54fa/01a0fde2-58b5-77e9-ac1a-32524bb010e8.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-10-02T18:33:10.615Z","updatedAt":"2026-10-02T18:40:07.315Z","publishedAt":"2026-10-02T18:33:10.612Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://tokyoskyline.framer.website","price":"5","paymentUrl":"https://guglielmo20.gumroad.com/l/tokyo-skyline","workshop":false,"categories":[{"id":"5c50a4d9-4405-49ca-8956-4909a204480d","name":"Sections","slug":"sections"}],"lastSaveId":"YL7K9iY3Ozx61gYH9InS","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":2,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-10-02T18:33:11.313Z","updatedAt":"2026-10-02T18:33:11.313Z","reported":false}}],"$L5f"]

Suggested for you