51: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/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/3xi9_0nh8wp68.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/1fkcqskfw4hol.js","/creators-assets/_next/static/immutable/chunks/1pd9j9dvaikmb.js","/creators-assets/_next/static/immutable/chunks/1dzckq15yxafa.js","/creators-assets/_next/static/immutable/chunks/2k4fp8uwg758i.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/05jm9t-fm5ei_.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/1an0rrmx8vr9j.js","/creators-assets/_next/static/immutable/chunks/2di2v55rtz-8i.js","/creators-assets/_next/static/immutable/chunks/2q-c5-h7837do.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/40pcohi_mocbm.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js"],"S"] 52: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

53:T673,

Broken by Design Pro is a hero made of shattered glass. The pane flies in and assembles in front of the visitor, with your title set inside the glass. Every shard is its own 3D layer: the pane follows the pointer, and the shard you touch lifts, tilts and catches the light.

Everything is editable from the properties panel: title, title size, colors, interaction, sound and the mute button.

Features

- 16 real glass shards, each an independent 3D layer

- Your title inside the glass, sliced shard by shard

- Assembling entrance that plays when the hero comes into view

- Pointer parallax and hover lift with a moving highlight

- Optional glass tick sound, with a mute button

- Separate glass set for portrait screens and phones

- Self-contained: no global styles, never touches your page's scroll

- Respects reduced motion

- Lightweight still preview in the editor

Includes the glass sprites, the button images, the font file, an install guide and a commercial license for unlimited projects.

The glass artwork was created with generative AI tools. The title font is Space Grotesk (SIL Open Font License).

Support: guglielmo.dev@proton.me

54: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.

The video footage was created with generative AI tools.

Support: guglielmo.dev@proton.me

50:["$","$L51",null,{"value":{"fallback":{"$inf$activity-creator-804c6d57-adef-4494-9f6d-d9bbfdfe54fa-all:/unified/creator/804c6d57-adef-4494-9f6d-d9bbfdfe54fa/activity/":[{"data":[{"id":"01a10102-7e86-7208-b4e4-177da22963ae","type":"comment.liked","target":{"type":"comment","id":"01a100e9-d327-73af-8fa2-ebaa85b051c5","preview":"Thanks😃","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Thanks"},{"type":"emoji","attrs":{"name":"smiley","emoji":"😃"}},{"type":"text","text":" "}]}]},"thumbnail":null,"targetDeleted":false,"owned":false,"actions":{"postId":"01a0fda9-2ce6-73ae-ba30-e49b8c10daeb","like":{"count":1,"liked":false},"reply":{"parentCommentId":"01a0ff22-3456-730b-9438-ff655eda761f"},"repost":null}},"context":{"type":"post","id":"01a0fda9-2ce6-73ae-ba30-e49b8c10daeb","preview":"DID I COOK?\nBuilt this 3D Image Gallery for Russet Supply\nBeen experimenting with a different way to showcase images\nLive preview\nWhat do you think?","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"DID I COOK?"}]},{"type":"paragraph","content":[{"type":"text","text":"Built this "},{"type":"text","text":"3D Image Gallery ","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow ugc","href":"https://framer.link/aqaPyNR","target":"_blank"}}]},{"type":"text","text":"for "},{"type":"text","text":"Russet Supply","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow ugc","href":"https://www.framer.com/@russetsupply/components/","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"Been experimenting with a different way to showcase images"}]},{"type":"paragraph","content":[{"type":"text","text":"Live preview","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow ugc","href":"https://3dimagegallery.framer.website/","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"What do you think?"}]}]},"thumbnail":"https://image.mux.com/HoW9DIkNASWBHg00r18xs01LcIH6R6gJj2TAXDpoSAAWU/thumbnail.webp?time=4.733","targetDeleted":false,"owned":false,"actions":{"postId":"01a0fda9-2ce6-73ae-ba30-e49b8c10daeb","like":{"count":18,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":2,"reposted":false,"repostId":null}}},"actors":[{"id":"804c6d57-adef-4494-9f6d-d9bbfdfe54fa","name":"Guglielmo Giannattasio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/2816290/6wsgMNpAD-q35ycKzLn90xa1pn4sEu2PrmeGFNPs","slug":"guglielmo-giannattasio","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-10-03T09:05:03.088Z","latestAt":"2026-10-03T09:05:03.088Z"},{"id":"01a10102-6269-76b9-80cc-ad69656b72ab","type":"comment.liked","target":{"type":"comment","id":"01a0ff25-426d-725c-9664-51689e2c7bf4","preview":"Appreciate it ! 🙏","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Appreciate it ! "},{"type":"emoji","attrs":{"name":"pray","emoji":"🙏"}}]}]},"thumbnail":null,"targetDeleted":false,"owned":false,"actions":{"postId":"01a0fe22-27ee-7711-a91e-f0db85faacad","like":{"count":1,"liked":false},"reply":{"parentCommentId":"01a0ff21-5591-7384-a2e6-1a0f645abc91"},"repost":null}},"context":{"type":"post","id":"01a0fe22-27ee-7711-a91e-f0db85faacad","preview":"Flat hero type is everywhere.\nWhat if the line had glass drift — and a lens that followed the pointer to pull each letter?\nGlass Mark. One headline. Letters sit on their own fields, drift light under glass. The lens follows your hand and tugs the glyphs.\nFree. Copy Component.","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Flat hero type is everywhere."}]},{"type":"paragraph","content":[{"type":"text","text":"What if the line had glass drift — and a lens that followed the pointer to pull each letter?"}]},{"type":"paragraph","content":[{"type":"text","text":"Glass Mark. One headline. Letters sit on their own fields, drift light under glass. The lens follows your hand and tugs the glyphs."}]},{"type":"paragraph","content":[{"type":"text","text":"Free. Copy Component.","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow ugc","href":"https://dub.sh/glass-mark","target":"_blank"}}]}]}]},"thumbnail":"https://image.mux.com/DQP1kTs0202WR011L2bL33XOKQso2GeoksH1yyKJhuroiU/thumbnail.webp?time=1.16","targetDeleted":false,"owned":false,"actions":{"postId":"01a0fe22-27ee-7711-a91e-f0db85faacad","like":{"count":13,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":3,"reposted":false,"repostId":null}}},"actors":[{"id":"804c6d57-adef-4494-9f6d-d9bbfdfe54fa","name":"Guglielmo Giannattasio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/2816290/6wsgMNpAD-q35ycKzLn90xa1pn4sEu2PrmeGFNPs","slug":"guglielmo-giannattasio","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-10-03T09:04:55.905Z","latestAt":"2026-10-03T09:04:55.905Z"},{"id":"01a10102-3987-70b9-9780-a2d02892794f","type":"creator.followed","target":{"type":"creator","id":"830039ba-56b1-42fc-a371-361e8f7a1e4c","preview":"RedDevs","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/70334/avatar-q9VjO21hdl19yEZkkQj3EgY306N2Yq.jpg","slug":"reddevs","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"804c6d57-adef-4494-9f6d-d9bbfdfe54fa","name":"Guglielmo Giannattasio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/2816290/6wsgMNpAD-q35ycKzLn90xa1pn4sEu2PrmeGFNPs","slug":"guglielmo-giannattasio","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-10-03T09:04:45.362Z","latestAt":"2026-10-03T09:04:45.362Z"},{"id":"01a0ff22-4c1f-736a-8007-324e7ac12224","type":"component.liked","target":{"type":"component","id":"lV7swE7Cm0Zp4xsgcn3C","preview":"Particle Navbar","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/94772ad7-baad-4763-bd35-365704374dc3/01a0fe53-610a-7717-a7f4-ad617edc3f9f.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"804c6d57-adef-4494-9f6d-d9bbfdfe54fa","name":"Guglielmo Giannattasio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/2816290/6wsgMNpAD-q35ycKzLn90xa1pn4sEu2PrmeGFNPs","slug":"guglielmo-giannattasio","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-10-03T00:20:32.920Z","latestAt":"2026-10-03T00:20:32.920Z"},{"id":"01a0ff22-4248-769a-b315-d5ab5debe48b","type":"post.liked","target":{"type":"post","id":"01a0fe80-1fe5-74b8-9167-3034bae5c291","preview":"A small Framer setting that can completely ruin your text animations. \nIf your text animation looks like it’s being cut off instead of smoothly animating, check the stack holds your text. \nIf it's overflow is set to Hidden/Clip, the animation can get chopped. \nSet it to:Overflow → Visible \nAnd the animation works as expected. \nI ran into this when I started, so heres a quick screen recording showing the problem → the fix → the final result.","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"A small Framer setting that can completely ruin your text animations. "}]},{"type":"paragraph","content":[{"type":"text","text":"If your text animation looks like it’s being cut off instead of smoothly animating, check the stack holds your text. "}]},{"type":"paragraph","content":[{"type":"text","text":"If it's overflow is set to Hidden/Clip, the animation can get chopped. "}]},{"type":"paragraph","content":[{"type":"text","text":"Set it to:Overflow → Visible "}]},{"type":"paragraph","content":[{"type":"text","text":"And the animation works as expected. "}]},{"type":"paragraph","content":[{"type":"text","text":"I ran into this when I started, so heres a quick screen recording showing the problem → the fix → the final result."}]}]},"thumbnail":"https://image.mux.com/mR2bOp7ExJhDKfwwOWbNRx995d4lZm02yrC00zQ4XXnA00/thumbnail.webp?time=2.317","targetDeleted":false,"owned":false,"actions":{"postId":"01a0fe80-1fe5-74b8-9167-3034bae5c291","like":{"count":1,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"context":null,"actors":[{"id":"804c6d57-adef-4494-9f6d-d9bbfdfe54fa","name":"Guglielmo Giannattasio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/2816290/6wsgMNpAD-q35ycKzLn90xa1pn4sEu2PrmeGFNPs","slug":"guglielmo-giannattasio","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-10-03T00:20:30.400Z","latestAt":"2026-10-03T00:20:30.400Z"},{"id":"01a0ff22-347b-70df-91c9-97f21f430edb","type":"comment.created","target":{"type":"post","id":"01a0fda9-2ce6-73ae-ba30-e49b8c10daeb","preview":"DID I COOK?\nBuilt this 3D Image Gallery for Russet Supply\nBeen experimenting with a different way to showcase images\nLive preview\nWhat do you think?","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"DID I COOK?"}]},{"type":"paragraph","content":[{"type":"text","text":"Built this "},{"type":"text","text":"3D Image Gallery ","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow ugc","href":"https://framer.link/aqaPyNR","target":"_blank"}}]},{"type":"text","text":"for "},{"type":"text","text":"Russet Supply","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow ugc","href":"https://www.framer.com/@russetsupply/components/","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"Been experimenting with a different way to showcase images"}]},{"type":"paragraph","content":[{"type":"text","text":"Live preview","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow ugc","href":"https://3dimagegallery.framer.website/","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"What do you think?"}]}]},"thumbnail":"https://image.mux.com/HoW9DIkNASWBHg00r18xs01LcIH6R6gJj2TAXDpoSAAWU/thumbnail.webp?time=4.733","targetDeleted":false,"owned":false,"actions":{"postId":"01a0fda9-2ce6-73ae-ba30-e49b8c10daeb","like":{"count":18,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":2,"reposted":false,"repostId":null}}},"context":{"type":"comment","id":"01a0ff22-3456-730b-9438-ff655eda761f","preview":"you did it bro","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"you did it bro"}]}]},"thumbnail":null,"targetDeleted":false,"owned":true,"actions":{"postId":"01a0fda9-2ce6-73ae-ba30-e49b8c10daeb","like":{"count":0,"liked":false},"reply":{"parentCommentId":"01a0ff22-3456-730b-9438-ff655eda761f"},"repost":null}},"actors":[{"id":"804c6d57-adef-4494-9f6d-d9bbfdfe54fa","name":"Guglielmo Giannattasio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/2816290/6wsgMNpAD-q35ycKzLn90xa1pn4sEu2PrmeGFNPs","slug":"guglielmo-giannattasio","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-10-03T00:20:26.875Z","latestAt":"2026-10-03T00:20:26.875Z"},{"id":"01a0ff21-fba1-701c-a14f-a783bf614e8f","type":"post.liked","target":{"type":"post","id":"01a0fda9-2ce6-73ae-ba30-e49b8c10daeb","preview":"DID I COOK?\nBuilt this 3D Image Gallery for Russet Supply\nBeen experimenting with a different way to showcase images\nLive preview\nWhat do you think?","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"DID I COOK?"}]},{"type":"paragraph","content":[{"type":"text","text":"Built this "},{"type":"text","text":"3D Image Gallery ","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow ugc","href":"https://framer.link/aqaPyNR","target":"_blank"}}]},{"type":"text","text":"for "},{"type":"text","text":"Russet Supply","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow ugc","href":"https://www.framer.com/@russetsupply/components/","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"Been experimenting with a different way to showcase images"}]},{"type":"paragraph","content":[{"type":"text","text":"Live preview","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow ugc","href":"https://3dimagegallery.framer.website/","target":"_blank"}}]}]},{"type":"paragraph","content":[{"type":"text","text":"What do you think?"}]}]},"thumbnail":"https://image.mux.com/HoW9DIkNASWBHg00r18xs01LcIH6R6gJj2TAXDpoSAAWU/thumbnail.webp?time=4.733","targetDeleted":false,"owned":false,"actions":{"postId":"01a0fda9-2ce6-73ae-ba30-e49b8c10daeb","like":{"count":18,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":2,"reposted":false,"repostId":null}}},"context":null,"actors":[{"id":"804c6d57-adef-4494-9f6d-d9bbfdfe54fa","name":"Guglielmo Giannattasio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/2816290/6wsgMNpAD-q35ycKzLn90xa1pn4sEu2PrmeGFNPs","slug":"guglielmo-giannattasio","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-10-03T00:20:12.310Z","latestAt":"2026-10-03T00:20:12.310Z"},{"id":"01a0ff21-e69c-756b-b436-188f8e4448da","type":"site.liked","target":{"type":"site","id":"17863","preview":"Gramfort","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cfa058a4-6d5e-43d7-98cb-02b13f8bfaee/01a0fe94-d773-77bd-b610-ef490bcf5dc6.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"804c6d57-adef-4494-9f6d-d9bbfdfe54fa","name":"Guglielmo Giannattasio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/2816290/6wsgMNpAD-q35ycKzLn90xa1pn4sEu2PrmeGFNPs","slug":"guglielmo-giannattasio","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"site","visibility":"public","startedAt":"2026-10-03T00:20:06.914Z","latestAt":"2026-10-03T00:20:06.914Z"},{"id":"01a0ff21-e2aa-70a8-af4b-0e7e6fb06f01","type":"site.liked","target":{"type":"site","id":"17866","preview":"FaryaDesign","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/27817366-c4c0-4906-8c8f-ca03787a52a4/01a0ff1b-26f0-73a6-8439-25981147b902.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"804c6d57-adef-4494-9f6d-d9bbfdfe54fa","name":"Guglielmo Giannattasio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/2816290/6wsgMNpAD-q35ycKzLn90xa1pn4sEu2PrmeGFNPs","slug":"guglielmo-giannattasio","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"site","visibility":"public","startedAt":"2026-10-03T00:20:05.920Z","latestAt":"2026-10-03T00:20:05.920Z"},{"id":"01a0ff21-de7e-77bc-a4da-ec2949803fac","type":"template.liked","target":{"type":"template","id":"74542","preview":"OpenMic","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/d6823ae6-2fbc-471a-9c31-935b846bf972/01a0feab-0199-7006-acef-16fd333c6311.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"804c6d57-adef-4494-9f6d-d9bbfdfe54fa","name":"Guglielmo Giannattasio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/2816290/6wsgMNpAD-q35ycKzLn90xa1pn4sEu2PrmeGFNPs","slug":"guglielmo-giannattasio","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"template","visibility":"public","startedAt":"2026-10-03T00:20:04.854Z","latestAt":"2026-10-03T00:20:04.854Z"},{"id":"01a0ff21-d97d-7119-a4d0-73b812e86fa9","type":"site.liked","target":{"type":"site","id":"17868","preview":"Sahor Portfolio","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/fbd0be99-9b37-432f-a651-912292a3aaa0/01a0feaa-8f51-736a-8128-bf2d8d5c8c44.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"804c6d57-adef-4494-9f6d-d9bbfdfe54fa","name":"Guglielmo Giannattasio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/2816290/6wsgMNpAD-q35ycKzLn90xa1pn4sEu2PrmeGFNPs","slug":"guglielmo-giannattasio","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"site","visibility":"public","startedAt":"2026-10-03T00:20:03.572Z","latestAt":"2026-10-03T00:20:03.572Z"},{"id":"01a0ff21-d4e0-741c-b366-46bbd8fbfb57","type":"site.liked","target":{"type":"site","id":"17869","preview":"CollarWorks IOS App","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cc1eb79d-673a-4634-9d8d-73a34bfb65ed/01a0feb6-1e97-772e-9aa9-57fc915c5ddf.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"804c6d57-adef-4494-9f6d-d9bbfdfe54fa","name":"Guglielmo Giannattasio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/2816290/6wsgMNpAD-q35ycKzLn90xa1pn4sEu2PrmeGFNPs","slug":"guglielmo-giannattasio","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"site","visibility":"public","startedAt":"2026-10-03T00:20:02.391Z","latestAt":"2026-10-03T00:20:02.391Z"},{"id":"01a0ff21-d133-7650-8509-fd7249da0e28","type":"template.liked","target":{"type":"template","id":"74543","preview":"Operandi","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/421e26d7-a6eb-4c8d-a5f5-f41e1754c366/01a0feaf-af90-7538-8b83-f32518ce01f6.jpg","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"804c6d57-adef-4494-9f6d-d9bbfdfe54fa","name":"Guglielmo Giannattasio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/2816290/6wsgMNpAD-q35ycKzLn90xa1pn4sEu2PrmeGFNPs","slug":"guglielmo-giannattasio","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"template","visibility":"public","startedAt":"2026-10-03T00:20:01.447Z","latestAt":"2026-10-03T00:20:01.447Z"},{"id":"01a0ff21-caae-76c1-9ce4-6c4580fc5a39","type":"component.liked","target":{"type":"component","id":"ayroSvNIYaHrLLrGhV0A","preview":"Fluid Image Flow","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cdbd7ebc-86d4-4b64-baea-421f236c7c35/01a0fec1-9240-769b-9fc5-a6edc3574a11.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"804c6d57-adef-4494-9f6d-d9bbfdfe54fa","name":"Guglielmo Giannattasio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/2816290/6wsgMNpAD-q35ycKzLn90xa1pn4sEu2PrmeGFNPs","slug":"guglielmo-giannattasio","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-10-03T00:19:59.783Z","latestAt":"2026-10-03T00:19:59.783Z"},{"id":"01a0ff21-55a5-703d-a229-dfdfd3f55f2f","type":"comment.created","target":{"type":"post","id":"01a0fe22-27ee-7711-a91e-f0db85faacad","preview":"Flat hero type is everywhere.\nWhat if the line had glass drift — and a lens that followed the pointer to pull each letter?\nGlass Mark. One headline. Letters sit on their own fields, drift light under glass. The lens follows your hand and tugs the glyphs.\nFree. Copy Component.","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Flat hero type is everywhere."}]},{"type":"paragraph","content":[{"type":"text","text":"What if the line had glass drift — and a lens that followed the pointer to pull each letter?"}]},{"type":"paragraph","content":[{"type":"text","text":"Glass Mark. One headline. Letters sit on their own fields, drift light under glass. The lens follows your hand and tugs the glyphs."}]},{"type":"paragraph","content":[{"type":"text","text":"Free. Copy Component.","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow ugc","href":"https://dub.sh/glass-mark","target":"_blank"}}]}]}]},"thumbnail":"https://image.mux.com/DQP1kTs0202WR011L2bL33XOKQso2GeoksH1yyKJhuroiU/thumbnail.webp?time=1.16","targetDeleted":false,"owned":false,"actions":{"postId":"01a0fe22-27ee-7711-a91e-f0db85faacad","like":{"count":13,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":3,"reposted":false,"repostId":null}}},"context":{"type":"comment","id":"01a0ff21-5591-7384-a2e6-1a0f645abc91","preview":"really cool","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"really cool"}]}]},"thumbnail":null,"targetDeleted":false,"owned":true,"actions":{"postId":"01a0fe22-27ee-7711-a91e-f0db85faacad","like":{"count":1,"liked":false},"reply":{"parentCommentId":"01a0ff21-5591-7384-a2e6-1a0f645abc91"},"repost":null}},"actors":[{"id":"804c6d57-adef-4494-9f6d-d9bbfdfe54fa","name":"Guglielmo Giannattasio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/2816290/6wsgMNpAD-q35ycKzLn90xa1pn4sEu2PrmeGFNPs","slug":"guglielmo-giannattasio","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-10-03T00:19:29.829Z","latestAt":"2026-10-03T00:19:29.829Z"},{"id":"01a0ff21-3d2b-753c-805a-00b1099f98a5","type":"post.liked","target":{"type":"post","id":"01a0fe22-27ee-7711-a91e-f0db85faacad","preview":"Flat hero type is everywhere.\nWhat if the line had glass drift — and a lens that followed the pointer to pull each letter?\nGlass Mark. One headline. Letters sit on their own fields, drift light under glass. The lens follows your hand and tugs the glyphs.\nFree. Copy Component.","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Flat hero type is everywhere."}]},{"type":"paragraph","content":[{"type":"text","text":"What if the line had glass drift — and a lens that followed the pointer to pull each letter?"}]},{"type":"paragraph","content":[{"type":"text","text":"Glass Mark. One headline. Letters sit on their own fields, drift light under glass. The lens follows your hand and tugs the glyphs."}]},{"type":"paragraph","content":[{"type":"text","text":"Free. Copy Component.","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow ugc","href":"https://dub.sh/glass-mark","target":"_blank"}}]}]}]},"thumbnail":"https://image.mux.com/DQP1kTs0202WR011L2bL33XOKQso2GeoksH1yyKJhuroiU/thumbnail.webp?time=1.16","targetDeleted":false,"owned":false,"actions":{"postId":"01a0fe22-27ee-7711-a91e-f0db85faacad","like":{"count":13,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":3,"reposted":false,"repostId":null}}},"context":null,"actors":[{"id":"804c6d57-adef-4494-9f6d-d9bbfdfe54fa","name":"Guglielmo Giannattasio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/2816290/6wsgMNpAD-q35ycKzLn90xa1pn4sEu2PrmeGFNPs","slug":"guglielmo-giannattasio","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-10-03T00:19:23.556Z","latestAt":"2026-10-03T00:19:23.556Z"},{"id":"01a0ff20-f78b-7230-b6cb-46f1e46c4a11","type":"template.liked","target":{"type":"template","id":"74545","preview":"PM Stack","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/f7c6d2db-3d3f-4e17-9ca9-568d16ef4fd5/01a0ff01-8177-740b-8dd6-5b0e270a0841.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"804c6d57-adef-4494-9f6d-d9bbfdfe54fa","name":"Guglielmo Giannattasio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/2816290/6wsgMNpAD-q35ycKzLn90xa1pn4sEu2PrmeGFNPs","slug":"guglielmo-giannattasio","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"template","visibility":"public","startedAt":"2026-10-03T00:19:05.706Z","latestAt":"2026-10-03T00:19:05.706Z"},{"id":"01a0fde4-4a19-71ae-b2a1-2e750362be20","type":"component.created","target":{"type":"component","id":"LFhEiVowFtpPq03EEOvt","preview":"Scroll Video Reveal","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/804c6d57-adef-4494-9f6d-d9bbfdfe54fa/01a0fde2-58b5-77e9-ac1a-32524bb010e8.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"804c6d57-adef-4494-9f6d-d9bbfdfe54fa","name":"Guglielmo Giannattasio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/2816290/6wsgMNpAD-q35ycKzLn90xa1pn4sEu2PrmeGFNPs","slug":"guglielmo-giannattasio","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-10-02T18:33:11.960Z","latestAt":"2026-10-02T18:33:11.960Z"},{"id":"01a0fbe0-b84e-7082-829a-397f0e3d7d3d","type":"comment.reply","target":{"type":"post","id":"01a0fa28-7798-718d-9dc3-b584d8599f9e","preview":"Shattered Glass Hero","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/804c6d57-adef-4494-9f6d-d9bbfdfe54fa/01a0fa27-921d-77ef-80d8-976a599f0fbc.png","targetDeleted":false,"owned":true,"actions":{"postId":"01a0fa28-7798-718d-9dc3-b584d8599f9e","like":{"count":5,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"context":{"type":"comment","id":"01a0fbe0-b82a-7777-8b68-683d70796568","preview":"thanks!","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"thanks!"}]}]},"thumbnail":null,"targetDeleted":false,"owned":true,"actions":{"postId":"01a0fa28-7798-718d-9dc3-b584d8599f9e","like":{"count":0,"liked":false},"reply":{"parentCommentId":"01a0fa4d-d844-76db-be86-373b9136ef83"},"repost":null}},"actors":[{"id":"804c6d57-adef-4494-9f6d-d9bbfdfe54fa","name":"Guglielmo Giannattasio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/2816290/6wsgMNpAD-q35ycKzLn90xa1pn4sEu2PrmeGFNPs","slug":"guglielmo-giannattasio","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-10-02T09:10:03.598Z","latestAt":"2026-10-02T09:10:03.598Z"},{"id":"01a0fbe0-a322-7396-b26a-3b522a01b8fe","type":"comment.liked","target":{"type":"comment","id":"01a0fa4d-d844-76db-be86-373b9136ef83","preview":"Nice","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Nice"}]}]},"thumbnail":null,"targetDeleted":false,"owned":false,"actions":{"postId":"01a0fa28-7798-718d-9dc3-b584d8599f9e","like":{"count":1,"liked":false},"reply":{"parentCommentId":"01a0fa4d-d844-76db-be86-373b9136ef83"},"repost":null}},"context":{"type":"post","id":"01a0fa28-7798-718d-9dc3-b584d8599f9e","preview":"Shattered Glass Hero","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/804c6d57-adef-4494-9f6d-d9bbfdfe54fa/01a0fa27-921d-77ef-80d8-976a599f0fbc.png","targetDeleted":false,"owned":true,"actions":{"postId":"01a0fa28-7798-718d-9dc3-b584d8599f9e","like":{"count":5,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"actors":[{"id":"804c6d57-adef-4494-9f6d-d9bbfdfe54fa","name":"Guglielmo Giannattasio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/2816290/6wsgMNpAD-q35ycKzLn90xa1pn4sEu2PrmeGFNPs","slug":"guglielmo-giannattasio","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-10-02T09:09:58.154Z","latestAt":"2026-10-02T09:09:58.154Z"}],"pagination":{"next":"MjAyNi0xMC0wMlQwOTowOTo1OC4xNTRafDAxYTBmYmUwLWEzMjItNzM5Ni1iMjZhLTNiNTIyYTAxYjhmZQ","previous":null},"totalCount":"$undefined","feedSession":"$undefined"}],"$inf$posts:804c6d57-adef-4494-9f6d-d9bbfdfe54fa:/unified/posts/?creator=804c6d57-adef-4494-9f6d-d9bbfdfe54fa&with=reposts":[{"data":[{"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":"$52","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"},{"id":"01a0fa28-7798-718d-9dc3-b584d8599f9e","title":null,"body":"

New component: Shattered Glass Hero. A hero made of 16 interactive 3D glass shards, with your title inside the glass. Live demo: https://brokenbydesign.framer.website

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"New component: Shattered Glass Hero. A hero made of 16 interactive 3D glass shards, with your title inside the glass. Live demo: "},{"type":"text","text":"https://brokenbydesign.framer.website","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://brokenbydesign.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":"WueeQfChCKyU0Ji6XjjJ","resolved":true,"title":"Shattered Glass Hero","body":"$53","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Broken by Design","marks":[{"type":"bold"}]},{"type":"text","text":" Pro is a hero made of shattered glass. The pane flies in and assembles in front of the visitor, with your title set inside the glass. Every shard is its own 3D layer: the pane follows the pointer, and the shard you touch lifts, tilts and catches the light."}]},{"type":"paragraph","content":[{"type":"text","text":"Everything is editable from the properties panel: title, title size, colors, interaction, sound and the mute button."}]},{"type":"paragraph","content":[{"type":"text","text":"Features","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"- 16 real glass shards, each an independent 3D layer"}]},{"type":"paragraph","content":[{"type":"text","text":"- Your title inside the glass, sliced shard by shard"}]},{"type":"paragraph","content":[{"type":"text","text":"- Assembling entrance that plays when the hero comes into view"}]},{"type":"paragraph","content":[{"type":"text","text":"- Pointer parallax and hover lift with a moving highlight"}]},{"type":"paragraph","content":[{"type":"text","text":"- Optional glass tick sound, with a mute button"}]},{"type":"paragraph","content":[{"type":"text","text":"- Separate glass set for portrait screens and phones"}]},{"type":"paragraph","content":[{"type":"text","text":"- Self-contained: no global styles, never touches your page's scroll"}]},{"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 glass sprites, the button images, the font file, 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 glass artwork was created with generative AI tools. The title font is Space Grotesk (SIL Open Font License).","marks":[{"type":"italic"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Support: guglielmo.dev@proton.me","marks":[{"type":"code"}]}]}]},"introduction":"Broken by Design · 3D shards","slug":"shattered-glass-hero","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/01a0fa27-921d-77ef-80d8-976a599f0fbc.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-10-02T01:09:10.510Z","updatedAt":"2026-10-02T18:39:05.114Z","publishedAt":"2026-10-02T01:09:10.507Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://brokenbydesign.framer.website","price":"5","paymentUrl":"https://guglielmo20.gumroad.com/l/broken-by-design","workshop":false,"categories":[{"id":"5c50a4d9-4405-49ca-8956-4909a204480d","name":"Sections","slug":"sections"}],"lastSaveId":"ZN0hHTGlnz7dCkBQlfTk","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":5,"liked":false},"comments":{"count":2},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-10-02T01:09:11.192Z","updatedAt":"2026-10-02T01:09:11.192Z"},{"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":"$54","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"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}]}},"children":"$L55"}]