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

City Opens Pro turns scrolling into a camera move. As you scroll, the hero stays pinned to the screen and the video plays: subway doors slide open onto a city at night. Scroll back and it plays in reverse.

Everything is editable from the properties panel: video, mobile video, poster, title, tagline, colors, overlay, zoom and scroll length. Drop in your own footage and it becomes your opening.

Features

- Pinned video scrub, forward and back

- Separate vertical video for phones

- Poster image while the video loads

- The page continues naturally after the video

- Works with any scroll: mouse, trackpad, touch, keyboard

- Self-contained: never touches your page's scroll or body styles

- Respects reduced motion

- Lightweight still preview in the editor

Includes 3 videos optimized for smooth scrubbing (1080p, 720p, vertical), a poster image, an install guide and a commercial license for unlimited projects.

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 was created with generative AI tools.

Support: guglielmo.dev@proton.me

5a:[["$","$L5d",null,{"post":{"id":"01a0ef55-0058-715f-b624-f7e9e3adc776","title":null,"body":"

My first Framer component is live: City Opens Pro, a scroll-locked video hero that plays like the opening of a film. Scroll forward, the doors open; scroll back, they close. Live demo: https://cityopens.framer.website

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"My first Framer component is live: City Opens Pro, a scroll-locked video hero that plays like the opening of a film. Scroll forward, the doors open; scroll back, they close. Live demo: "},{"type":"text","text":"https://cityopens.framer.website","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://cityopens.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":"VMh5cY3SILO7kWAUxR7W","resolved":true,"title":"City Opens Pro","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"City Opens Pro turns scrolling into a camera move. As you scroll, the hero stays pinned to the screen and the video plays: subway doors slide open onto a city at night. Scroll back and it plays in reverse."}]},{"type":"paragraph","content":[{"type":"text","text":"Everything is editable from the properties panel: video, mobile video, poster, title, tagline, colors, overlay, zoom and scroll length. Drop in your own footage and it becomes your opening."}]},{"type":"paragraph","content":[{"type":"text","text":"Features","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"- Pinned video scrub, forward and back"}]},{"type":"paragraph","content":[{"type":"text","text":"- Separate vertical video for phones"}]},{"type":"paragraph","content":[{"type":"text","text":"- Poster image while the video loads"}]},{"type":"paragraph","content":[{"type":"text","text":"- The page continues naturally after the video"}]},{"type":"paragraph","content":[{"type":"text","text":"- Works with any scroll: mouse, trackpad, touch, keyboard"}]},{"type":"paragraph","content":[{"type":"text","text":"- Self-contained: never touches your page's scroll or body styles"}]},{"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 3 videos optimized for smooth scrubbing (1080p, 720p, vertical), a poster image, an install guide and a commercial license for unlimited projects."}]},{"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 was created with generative AI tools.","marks":[{"type":"italic"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Support: guglielmo.dev@proton.me","marks":[{"type":"code"}]}]}]},"introduction":"Cinematic scroll-scrub video hero","slug":"city-opens-pro","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/01a0fde5-6415-73ee-8a72-e2890a4c7534.jpg","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-29T22:41:59.767Z","updatedAt":"2026-10-02T18:39:33.782Z","publishedAt":"2026-09-29T22:41:59.764Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://cityopens.framer.website","price":"5","paymentUrl":"https://guglielmo20.gumroad.com/l/city-opens-pro","workshop":false,"categories":[{"id":"5c50a4d9-4405-49ca-8956-4909a204480d","name":"Sections","slug":"sections"}],"lastSaveId":"422LLt6wWcecOIJdF97W","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":0,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-29T22:42:00.408Z","updatedAt":"2026-09-29T22:42:00.408Z","reported":false}}],"$L5f"]

Suggested for you