5c:I[267044,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/40ipl9wdtrm_x.js","/creators-assets/_next/static/immutable/chunks/1bd061yvfby7i.js","/creators-assets/_next/static/immutable/chunks/2ii8lkleumgkk.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/1amcd-eostlux.js","/creators-assets/_next/static/immutable/chunks/06b9gh03a5itu.js","/creators-assets/_next/static/immutable/chunks/19qq0hy3mz_vv.js","/creators-assets/_next/static/immutable/chunks/2oixy7hansmjm.js","/creators-assets/_next/static/immutable/chunks/2rczsbgoa3afm.js","/creators-assets/_next/static/immutable/chunks/3kkqflhmmpg9p.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/3xzkckc77quth.js","/creators-assets/_next/static/immutable/chunks/0ib-rcz4b0eq3.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/25aeqr2ydtz4o.js","/creators-assets/_next/static/immutable/chunks/2hfz7h1vpjv9v.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/2a63j-5qkrdf4.js","/creators-assets/_next/static/immutable/chunks/0mgwzh6o644jl.js","/creators-assets/_next/static/immutable/chunks/41glpbsahf_22.js","/creators-assets/_next/static/immutable/chunks/0xd4yj8g3g-ci.js","/creators-assets/_next/static/immutable/chunks/31t_i-sjkqwxc.js","/creators-assets/_next/static/immutable/chunks/3o5qsyzxffd89.js","/creators-assets/_next/static/immutable/chunks/0sdd6rzuigoor.js","/creators-assets/_next/static/immutable/chunks/31wecb1pe5ugs.js","/creators-assets/_next/static/immutable/chunks/2bej0vd4kut9m.js","/creators-assets/_next/static/immutable/chunks/3f4d4x4z1mrzh.js","/creators-assets/_next/static/immutable/chunks/0mf-dfabvof5m.js","/creators-assets/_next/static/immutable/chunks/28zsl3gu7sgg3.js","/creators-assets/_next/static/immutable/chunks/2r15b2hek61lg.js","/creators-assets/_next/static/immutable/chunks/31uxrh745m-yq.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/1hrrs8zq4ee_v.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/3eh5q_6ksmw0l.js","/creators-assets/_next/static/immutable/chunks/0kwdy8yc-c0ba.js","/creators-assets/_next/static/immutable/chunks/2rdaqkxiyeq_6.js"],"S"] 5d:T8dc,

Reveal Hero — Full-Bleed Video Hero Section

Give your homepage an opening moment that makes people stop scrolling. Reveal Hero is a fully responsive, no-code hero section for Framer — combining a full-bleed background video, a floating glass nav bar, and a bold two-tone headline into one polished, ready-to-publish component.

Designed to feel editorial, not templated

A rounded, full-bleed video canvas anchors the page, a pill-shaped nav bar floats above it, and a large right-aligned headline pairs a heavy display typeface with a soft body font for contrast — premium straight out of the box, and fully yours to restyle.

What's included

Full-bleed video or image background — Drop in your own looping video and poster image. Falls back gracefully under reduced motion.
Floating glass nav bar — An elevated pill nav with an animated underline on hover and active state, fully keyboard-accessible.
Two-tone headline — Split your title into three parts so the middle word can carry its own accent color.
Editable copy and CTA — Eyebrow text, body copy, and call-to-action (with link) are all property controls — no code needed.
Responsive by default — Type and spacing scale down at tablet widths. Below 680px, the nav collapses into a built-in animated hamburger menu.
One accent color, applied everywhere — Updates the nav underline, headline accent, and focus outlines together.
Accessible — ARIA labeling, visible focus rings, and automatic video-disable under prefers-reduced-motion.

Fully customizable, zero code editing

Every text field, nav link, accent color, and background asset is controlled from Framer's property panel — just drop it in, swap your media, and adjust copy.

Ideal for

Agencies, studios, wellness and hospitality brands, boutique launches, portfolios, and any homepage that wants a strong, motion-forward first impression.

5e:T93b,

EchoFlow — Cinematic Coverflow Music Player

Bring a premium music experience to your Framer projects with EchoFlow, an interactive coverflow music player inspired by modern streaming apps. Featuring fluid animations, immersive playback, and a beautiful glassmorphism interface, EchoFlow transforms audio into a visually engaging experience—without writing a single line of code.

Perfect for artist portfolios, music websites, podcasts, creative landing pages, and interactive showcases.

Features

• 🎵 Interactive 3D-inspired coverflow carousel • ▶ Functional audio playback with play, pause, skip, seek, and optional auto-advance • 🎤 Synced lyrics view for supported tracks • 📋 Queue / Up Next panel for playlist navigation • ❤ Like and Share actions • 🎚 Smooth interactive progress bar • 🔊 Multiple playback control layouts (Full, Volume Only, Minimal) • ✨ Premium glassmorphism interface with fluid animations • 📱 Fully responsive across desktop, tablet, and mobile • 🎨 Easily customize artwork, tracks, audio, sizing, spacing, tilt, corner radius, backgrounds, and more through Framer's property panel • ⚡ No code required

Perfect For

• Music streaming websites • Artist & band portfolios • Album releases • Podcast websites • Creative agencies • Landing pages • Interactive product showcases

EchoFlow is designed for creators who want more than a basic audio player. Every interaction is crafted to feel smooth, modern, and immersive, helping you create memorable experiences that elevate your website.

Build stunning music experiences with EchoFlow—premium motion, beautiful design, and effortless customization.

5f:T67e,

Focus Card — an editorial cover that pulls into focus

Focus Card is a code component that turns a simple portrait card into a two-act story. In its resting state, it reads like a magazine cover — a bold color panel, kicker, title, issue meta, and body copy sitting beside a portrait. Click it, and the whole thing morphs: the panel floods into a full-bleed background, the portrait pushes in and darkens, a cropped strip reveals a close-up detail, and a large typographic wordmark fades in with a justified poem beneath it. One click back, and it returns to the cover.

Every transition is handled with smooth, orchestrated motion — no jump cuts, no layout shift — so it feels like one continuous camera move rather than two separate screens.

Fully customizable, no code required:

Swap in your own portrait image
Toggle black & white or full color
Set independent colors for the cover panel and the focus background
Adjust the reveal strip's position, size, zoom, and crop offset
Independent font, size, and color controls for the title, kicker, issue label, date label, body text, poem, and wordmark
Adjustable corner radius

Great for:

Portfolio and case-study cards
Editorial or magazine-style landing pages
Team/about pages with a memorable reveal
Any place a static card feels like it's missing a story

Drop it into any Framer project, connect your content, and it just works.

57:["$","$L5c",null,{"value":{"fallback":{"$inf$activity-creator-38b4ee22-5245-45e4-9e51-12ad44aa4e68-all:/unified/creator/38b4ee22-5245-45e4-9e51-12ad44aa4e68/activity/":[{"data":[{"id":"019f9824-d451-716f-998b-81c3e439f726","type":"component.created","target":{"type":"component","id":"zpfa2lhueMA2TFLVQLzh","preview":"Horizon Hero","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/38b4ee22-5245-45e4-9e51-12ad44aa4e68/019f9824-56cb-7455-b243-7a19e0ee9ca0.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"38b4ee22-5245-45e4-9e51-12ad44aa4e68","name":"Ansh Jswl","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/38b4ee22-5245-45e4-9e51-12ad44aa4e68/aogk874e","slug":"ansh-jswl","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-07-25T07:19:38.321Z","latestAt":"2026-07-25T07:19:38.321Z"},{"id":"019f7a70-292d-73cb-a350-460e2fd416fa","type":"comment.reply","target":{"type":"post","id":"019f7961-a345-70be-ad73-156430b25dd3","preview":"Should i drop this component?","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Should i drop this component?"}]}]},"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/38b4ee22-5245-45e4-9e51-12ad44aa4e68/019f7961-3518-71ed-8f45-402db1e97252.png","targetDeleted":false,"owned":true,"actions":{"postId":"019f7961-a345-70be-ad73-156430b25dd3","like":{"count":9,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"context":{"type":"comment","id":"019f7a70-2915-705e-ad58-9ffb84f697e7","preview":"Dropped it ❤ https://www.framer.com/community/marketplace/components/echoflow/","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Dropped it "},{"type":"emoji","attrs":{"name":"heart","emoji":"❤"}},{"type":"text","text":" "},{"type":"text","text":"https://www.framer.com/community/marketplace/components/echoflow/","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://www.framer.com/community/marketplace/components/echoflow/","target":"_blank"}}]}]}]},"thumbnail":null,"targetDeleted":false,"owned":true,"actions":{"postId":"019f7961-a345-70be-ad73-156430b25dd3","like":{"count":1,"liked":false},"reply":{"parentCommentId":"019f7988-c146-7526-91a8-d214731d5a63"},"repost":null}},"actors":[{"id":"38b4ee22-5245-45e4-9e51-12ad44aa4e68","name":"Ansh Jswl","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/38b4ee22-5245-45e4-9e51-12ad44aa4e68/aogk874e","slug":"ansh-jswl","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-07-19T12:53:18.765Z","latestAt":"2026-07-19T12:53:18.765Z"},{"id":"019f7a6f-dcc7-77f8-b0d3-2b4b419d7413","type":"comment.liked","target":{"type":"comment","id":"019f7988-c146-7526-91a8-d214731d5a63","preview":"Yes, definitely drop it — the component looks promising. Curious to see the interaction states too!","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Yes, definitely drop it — the component looks promising. Curious to see the interaction states too!"}]}]},"thumbnail":null,"targetDeleted":false,"owned":false,"actions":{"postId":"019f7961-a345-70be-ad73-156430b25dd3","like":{"count":1,"liked":false},"reply":{"parentCommentId":"019f7988-c146-7526-91a8-d214731d5a63"},"repost":null}},"context":{"type":"post","id":"019f7961-a345-70be-ad73-156430b25dd3","preview":"Should i drop this component?","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Should i drop this component?"}]}]},"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/38b4ee22-5245-45e4-9e51-12ad44aa4e68/019f7961-3518-71ed-8f45-402db1e97252.png","targetDeleted":false,"owned":true,"actions":{"postId":"019f7961-a345-70be-ad73-156430b25dd3","like":{"count":9,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"actors":[{"id":"38b4ee22-5245-45e4-9e51-12ad44aa4e68","name":"Ansh Jswl","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/38b4ee22-5245-45e4-9e51-12ad44aa4e68/aogk874e","slug":"ansh-jswl","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-07-19T12:52:59.197Z","latestAt":"2026-07-19T12:52:59.197Z"},{"id":"019f7994-e0f2-7557-a825-1df0e95fb439","type":"component.created","target":{"type":"component","id":"PTGiHSdrdBONGmoKQ7Cb","preview":"EchoFlow","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/38b4ee22-5245-45e4-9e51-12ad44aa4e68/019f7994-1fa1-72c8-aed3-c19e0d7b03c7.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"38b4ee22-5245-45e4-9e51-12ad44aa4e68","name":"Ansh Jswl","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/38b4ee22-5245-45e4-9e51-12ad44aa4e68/aogk874e","slug":"ansh-jswl","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-07-19T08:53:47.890Z","latestAt":"2026-07-19T08:53:47.890Z"},{"id":"019f620c-7bc0-728c-b59b-c136eb3f345d","type":"component.created","target":{"type":"component","id":"pi3GzaiBjmtv2Udx0q2x","preview":"Editorial Focus Card","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/38b4ee22-5245-45e4-9e51-12ad44aa4e68/019f6209-82b3-7557-82ba-0a7aff510979.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"38b4ee22-5245-45e4-9e51-12ad44aa4e68","name":"Ansh Jswl","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/38b4ee22-5245-45e4-9e51-12ad44aa4e68/aogk874e","slug":"ansh-jswl","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-07-14T19:13:33.120Z","latestAt":"2026-07-14T19:13:33.120Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}],"$inf$posts:38b4ee22-5245-45e4-9e51-12ad44aa4e68:/unified/posts/?creator=38b4ee22-5245-45e4-9e51-12ad44aa4e68&with=reposts":[{"data":[{"id":"019f9824-d2cb-77e6-a706-bab49949c515","title":null,"body":"

A Healing Hero

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"A Healing Hero"}]}]},"author":{"framerUserId":"38b4ee22-5245-45e4-9e51-12ad44aa4e68","name":"Ansh Jswl","slug":"ansh-jswl","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/38b4ee22-5245-45e4-9e51-12ad44aa4e68/aogk874e","followed":false,"followsYou":false},"media":[],"resources":[{"id":"zpfa2lhueMA2TFLVQLzh","resolved":true,"title":"Horizon Hero","body":"$5d","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Reveal Hero — Full-Bleed Video Hero Section","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Give your homepage an opening moment that makes people stop scrolling. Reveal Hero is a fully responsive, no-code hero section for Framer — combining a full-bleed background video, a floating glass nav bar, and a bold two-tone headline into one polished, ready-to-publish component."}]},{"type":"paragraph","content":[{"type":"text","text":"Designed to feel editorial, not templated","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"A rounded, full-bleed video canvas anchors the page, a pill-shaped nav bar floats above it, and a large right-aligned headline pairs a heavy display typeface with a soft body font for contrast — premium straight out of the box, and fully yours to restyle."}]},{"type":"paragraph","content":[{"type":"text","text":"What's included","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Full-bleed video or image background","marks":[{"type":"bold"}]},{"type":"text","text":" — Drop in your own looping video and poster image. Falls back gracefully under reduced motion."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Floating glass nav bar","marks":[{"type":"bold"}]},{"type":"text","text":" — An elevated pill nav with an animated underline on hover and active state, fully keyboard-accessible."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Two-tone headline","marks":[{"type":"bold"}]},{"type":"text","text":" — Split your title into three parts so the middle word can carry its own accent color."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Editable copy and CTA","marks":[{"type":"bold"}]},{"type":"text","text":" — Eyebrow text, body copy, and call-to-action (with link) are all property controls — no code needed."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Responsive by default","marks":[{"type":"bold"}]},{"type":"text","text":" — Type and spacing scale down at tablet widths. Below 680px, the nav collapses into a built-in animated hamburger menu."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"One accent color, applied everywhere","marks":[{"type":"bold"}]},{"type":"text","text":" — Updates the nav underline, headline accent, and focus outlines together."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Accessible","marks":[{"type":"bold"}]},{"type":"text","text":" — ARIA labeling, visible focus rings, and automatic video-disable under "},{"type":"text","text":"prefers-reduced-motion","marks":[{"type":"code"}]},{"type":"text","text":"."}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Fully customizable, zero code editing","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Every text field, nav link, accent color, and background asset is controlled from Framer's property panel — just drop it in, swap your media, and adjust copy."}]},{"type":"paragraph","content":[{"type":"text","text":"Ideal for","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Agencies, studios, wellness and hospitality brands, boutique launches, portfolios, and any homepage that wants a strong, motion-forward first impression."}]}]},"introduction":"Full-bleed video hero","slug":"horizon-hero","author":{"framerUserId":"38b4ee22-5245-45e4-9e51-12ad44aa4e68","name":"Ansh Jswl","slug":"ansh-jswl","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/38b4ee22-5245-45e4-9e51-12ad44aa4e68/aogk874e","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/38b4ee22-5245-45e4-9e51-12ad44aa4e68/019f9824-56cb-7455-b243-7a19e0ee9ca0.png","metadata":{"tint":{"h":80,"s":77,"l":36},"width":1502,"height":840}}],"post":null,"createdAt":"2026-07-25T07:19:37.546Z","updatedAt":"2026-07-25T07:24:24.541Z","publishedAt":"2026-07-25T07:19:37.540Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://brainy-outcomes-218269.framer.app/","price":"5","paymentUrl":"https://anshstudio.lemonsqueezy.com/checkout/buy/b0ab2154-0d9d-45e7-9a12-2302792c88f3","workshop":false,"categories":[{"id":"5c50a4d9-4405-49ca-8956-4909a204480d","name":"Sections","slug":"sections"}],"lastSaveId":"Qk5hI5htSNlvb0uAx0yK","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":4,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-07-25T07:19:37.935Z","updatedAt":"2026-07-25T07:19:37.935Z"},{"id":"019f7994-dfb7-706b-a760-f3959dd8c961","title":null,"body":"

hAVE fUN :a

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"hAVE fUN :a"}]}]},"author":{"framerUserId":"38b4ee22-5245-45e4-9e51-12ad44aa4e68","name":"Ansh Jswl","slug":"ansh-jswl","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/38b4ee22-5245-45e4-9e51-12ad44aa4e68/aogk874e","followed":false,"followsYou":false},"media":[],"resources":[{"id":"PTGiHSdrdBONGmoKQ7Cb","resolved":true,"title":"EchoFlow","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"EchoFlow — Cinematic Coverflow Music Player"}]},{"type":"paragraph","content":[{"type":"text","text":"Bring a premium music experience to your Framer projects with "},{"type":"text","text":"EchoFlow","marks":[{"type":"bold"}]},{"type":"text","text":", an interactive coverflow music player inspired by modern streaming apps. Featuring fluid animations, immersive playback, and a beautiful glassmorphism interface, EchoFlow transforms audio into a visually engaging experience—without writing a single line of code."}]},{"type":"paragraph","content":[{"type":"text","text":"Perfect for artist portfolios, music websites, podcasts, creative landing pages, and interactive showcases."}]},{"type":"customHeading","content":[{"type":"text","text":"Features"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"• "},{"type":"emoji","attrs":{"name":"musical_note","emoji":"🎵"}},{"type":"text","text":" Interactive 3D-inspired coverflow carousel • "},{"type":"emoji","attrs":{"name":"arrow_forward","emoji":"▶"}},{"type":"text","text":" Functional audio playback with play, pause, skip, seek, and optional auto-advance • "},{"type":"emoji","attrs":{"name":"microphone","emoji":"🎤"}},{"type":"text","text":" Synced lyrics view for supported tracks • "},{"type":"emoji","attrs":{"name":"clipboard","emoji":"📋"}},{"type":"text","text":" Queue / Up Next panel for playlist navigation • "},{"type":"emoji","attrs":{"name":"heart","emoji":"❤"}},{"type":"text","text":" Like and Share actions • "},{"type":"emoji","attrs":{"name":"level_slider","emoji":"🎚"}},{"type":"text","text":" Smooth interactive progress bar • "},{"type":"emoji","attrs":{"name":"loud_sound","emoji":"🔊"}},{"type":"text","text":" Multiple playback control layouts (Full, Volume Only, Minimal) • "},{"type":"emoji","attrs":{"name":"sparkles","emoji":"✨"}},{"type":"text","text":" Premium glassmorphism interface with fluid animations • "},{"type":"emoji","attrs":{"name":"iphone","emoji":"📱"}},{"type":"text","text":" Fully responsive across desktop, tablet, and mobile • "},{"type":"emoji","attrs":{"name":"art","emoji":"🎨"}},{"type":"text","text":" Easily customize artwork, tracks, audio, sizing, spacing, tilt, corner radius, backgrounds, and more through Framer's property panel • "},{"type":"emoji","attrs":{"name":"zap","emoji":"⚡"}},{"type":"text","text":" No code required"}]},{"type":"customHeading","content":[{"type":"text","text":"Perfect For"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"• Music streaming websites • Artist & band portfolios • Album releases • Podcast websites • Creative agencies • Landing pages • Interactive product showcases"}]},{"type":"paragraph","content":[{"type":"text","text":"EchoFlow is designed for creators who want more than a basic audio player. Every interaction is crafted to feel smooth, modern, and immersive, helping you create memorable experiences that elevate your website."}]},{"type":"paragraph","content":[{"type":"text","text":"Build stunning music experiences with EchoFlow—premium motion, beautiful design, and effortless customization.","marks":[{"type":"bold"}]}]}]},"introduction":"Elegant music playback with fluid","slug":"echoflow","author":{"framerUserId":"38b4ee22-5245-45e4-9e51-12ad44aa4e68","name":"Ansh Jswl","slug":"ansh-jswl","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/38b4ee22-5245-45e4-9e51-12ad44aa4e68/aogk874e","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/38b4ee22-5245-45e4-9e51-12ad44aa4e68/019f7994-1fa1-72c8-aed3-c19e0d7b03c7.png","metadata":{"tint":{"h":71,"s":92,"l":19},"width":1385,"height":1200}}],"post":null,"createdAt":"2026-07-19T08:53:47.250Z","updatedAt":"2026-07-19T08:53:47.250Z","publishedAt":"2026-07-19T08:53:47.246Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://easy-ship-226861.framer.app/","price":"5","paymentUrl":"https://anshstudio.lemonsqueezy.com/checkout/buy/a762060a-b923-4093-9657-c217e6181a20","workshop":false,"categories":[{"id":"ae04a700-60cc-429a-b133-88f3c9709ec0","name":"Players","slug":"players"}],"lastSaveId":"FvRYM8BRthuI9UymRuWz","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-07-19T08:53:47.575Z","updatedAt":"2026-07-19T08:53:47.575Z"},{"id":"019f7961-a345-70be-ad73-156430b25dd3","title":null,"body":"

Should i drop this component?

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Should i drop this component?"}]}]},"author":{"framerUserId":"38b4ee22-5245-45e4-9e51-12ad44aa4e68","name":"Ansh Jswl","slug":"ansh-jswl","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/38b4ee22-5245-45e4-9e51-12ad44aa4e68/aogk874e","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/38b4ee22-5245-45e4-9e51-12ad44aa4e68/019f7961-3518-71ed-8f45-402db1e97252.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":567,"height":717}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/38b4ee22-5245-45e4-9e51-12ad44aa4e68/019f7961-35e9-71bf-8928-30b0e66c48a1.png","metadata":{"tint":{"h":0,"s":0,"l":30},"width":1487,"height":845}}],"resources":[],"contests":[],"categories":[{"id":"cf35162f-8406-49a9-a023-4c58024795ee","name":"General","slug":"general","description":"General","metaTitle":"General","metaDescription":"General"}],"tags":[],"likes":{"count":9,"liked":false},"comments":{"count":2},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-07-19T07:57:49.769Z","updatedAt":"2026-07-19T07:57:49.769Z"},{"id":"019f620c-7a35-76ef-9204-1418b0aa9bc1","title":null,"body":"

The Proposal of Empire State Building.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"The Proposal of Empire State Building."}]}]},"author":{"framerUserId":"38b4ee22-5245-45e4-9e51-12ad44aa4e68","name":"Ansh Jswl","slug":"ansh-jswl","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/38b4ee22-5245-45e4-9e51-12ad44aa4e68/aogk874e","followed":false,"followsYou":false},"media":[],"resources":[{"id":"pi3GzaiBjmtv2Udx0q2x","resolved":true,"title":"Editorial Focus Card","body":"$5f","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Focus Card — an editorial cover that pulls into focus","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Focus Card is a code component that turns a simple portrait card into a two-act story. In its resting state, it reads like a magazine cover — a bold color panel, kicker, title, issue meta, and body copy sitting beside a portrait. Click it, and the whole thing morphs: the panel floods into a full-bleed background, the portrait pushes in and darkens, a cropped strip reveals a close-up detail, and a large typographic wordmark fades in with a justified poem beneath it. One click back, and it returns to the cover."}]},{"type":"paragraph","content":[{"type":"text","text":"Every transition is handled with smooth, orchestrated motion — no jump cuts, no layout shift — so it feels like one continuous camera move rather than two separate screens."}]},{"type":"paragraph","content":[{"type":"text","text":"Fully customizable, no code required:","marks":[{"type":"bold"}]}]},{"type":"paragraph"},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Swap in your own portrait image"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Toggle black & white or full color"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Set independent colors for the cover panel and the focus background"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjust the reveal strip's position, size, zoom, and crop offset"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Independent font, size, and color controls for the title, kicker, issue label, date label, body text, poem, and wordmark"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable corner radius"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Great for:","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Portfolio and case-study cards"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Editorial or magazine-style landing pages"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Team/about pages with a memorable reveal"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Any place a static card feels like it's missing a story"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Drop it into any Framer project, connect your content, and it just works."}]}]},"introduction":"One card, two moods — flip between","slug":"editorial-focus-card","author":{"framerUserId":"38b4ee22-5245-45e4-9e51-12ad44aa4e68","name":"Ansh Jswl","slug":"ansh-jswl","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/38b4ee22-5245-45e4-9e51-12ad44aa4e68/aogk874e","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/38b4ee22-5245-45e4-9e51-12ad44aa4e68/019f6209-82b3-7557-82ba-0a7aff510979.png","metadata":{"tint":{"h":0,"s":0,"l":36},"width":1385,"height":1200}}],"post":null,"createdAt":"2026-07-14T19:13:32.397Z","updatedAt":"2026-07-15T16:47:12.107Z","publishedAt":"2026-07-14T19:13:32.392Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://popular-usability-851008.framer.app/","price":"5","paymentUrl":"https://anshstudio.lemonsqueezy.com/checkout/buy/0095ee43-498b-4173-a11a-ff7e71209f5a","workshop":false,"categories":[{"id":"c3e183d1-597a-4479-8a6f-244ae3c96f40","name":"Cards","slug":"cards"}],"lastSaveId":"twk0ZWcNfbduZIMbKaNL","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":8,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-07-14T19:13:32.725Z","updatedAt":"2026-07-14T19:13:32.725Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}]}},"children":"$L60"}]