---
title: "Editorial Focus Card — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Ansh Jswl · Cards. One card, two moods — flip between"
canonical: "https://framer.elliotli.dev/component/editorial-focus-card"
---

[Home](/)/[Components](/components)/[Cards](/components/category/cards)/Editorial Focus Card

# Editorial Focus Card

One card, two moods — flip between

[View on Framer](https://framer.com/marketplace/components/editorial-focus-card/?via=elliot-li)

![Editorial Focus Card preview image 1](https://framer.elliotli.dev/og/component/editorial-focus-card/267a6f45c37a87ef/1600x1386.jpg)

## Summary

One card, two moods — flip between

## Description

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

## Rank history [How rankings work →](/terms#rankings)

-   All · #5653

## Details

- **Author**: Ansh Jswl
- **Price**: $5.00
- **Published**: 2026-07-14
- **Updated**: 2026-07-15
- **Added**: 2026-07-14
- **Categories**: Cards

## More like this

-   [Particle Team Cards](/component/particle-team-cards) — Frame Native · Free — Portraits that move as particles
-   [Card Swap](/component/card-swap) — Antoine Lacombled · $9 — A 3D card stack you can fling
-   [Overlay Reveal Card](/component/overlay-reveal-card) — Pentaclay · Free — Project Card With Hover Overlay
-   [Deckshift](/component/deckshift) — BeyondPixel · $15 — Interactive Stacked Focus Cards