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