CaseLens turns a transformation image into a high-taste agency case-study section: before/after reveal, client context, project metadata, proof metrics, glass mode, and a press-only CTA in one editable Framer component. The default tone is deliberately premium: make the reveal feel expensive.
- Before/after image reveal with draggable lens divider
- Static-renderer safe fallback for Canvas and export
- Keyboard-accessible reveal control
- Editable client, discipline, year, title, summary, CTA, and URL
- Three editable proof metrics
- Premium editorial default styling
- Optional iOS-style glass surface
- Press-only CTA motion with no hover wobble
- Reduced Motion support
- Token-friendly colors and radius controls
- Brand agency case studies
- Creative studio portfolios
- Redesign and rebrand pages
- Architecture and interior before/after reveals
- Retouching, photography, and production portfolios
- Premium landing pages that need one distinctive proof section
Most compare sliders feel like a utility widget. CaseLens behaves more like a creative director’s case-study spread: restrained typography, client metadata, proof metrics, a cinematic reveal, and no cheap hover wobble.
It is intentionally opinionated. The target buyer is the person who wants their work to feel expensive before the visitor reads a single line of copy.
1. Add CaseLens to a Framer page.
2. Add the component to the Workspace Library if it was pasted as a Code file.
3. Replace the before and after images.
4. Edit the client, discipline, year, headline, summary, and CTA.
5. Tune the starting reveal position.
6. Toggle Glass mode depending on the page background.
7. Preview desktop and mobile before publishing.
CaseLens turns a transformation image into a high-taste agency case-study section: before/after reveal, client context, project metadata, proof metrics, glass mode, and a press-only CTA in one editable Framer component. The default tone is deliberately premium: make the reveal feel expensive.
- Before/after image reveal with draggable lens divider
- Static-renderer safe fallback for Canvas and export
- Keyboard-accessible reveal control
- Editable client, discipline, year, title, summary, CTA, and URL
- Three editable proof metrics
- Premium editorial default styling
- Optional iOS-style glass surface
- Press-only CTA motion with no hover wobble
- Reduced Motion support
- Token-friendly colors and radius controls
- Brand agency case studies
- Creative studio portfolios
- Redesign and rebrand pages
- Architecture and interior before/after reveals
- Retouching, photography, and production portfolios
- Premium landing pages that need one distinctive proof section
Most compare sliders feel like a utility widget. CaseLens behaves more like a creative director’s case-study spread: restrained typography, client metadata, proof metrics, a cinematic reveal, and no cheap hover wobble.
It is intentionally opinionated. The target buyer is the person who wants their work to feel expensive before the visitor reads a single line of copy.
1. Add CaseLens to a Framer page.
2. Add the component to the Workspace Library if it was pasted as a Code file.
3. Replace the before and after images.
4. Edit the client, discipline, year, headline, summary, and CTA.
5. Tune the starting reveal position.
6. Toggle Glass mode depending on the page background.
7. Preview desktop and mobile before publishing.
knokknokD
