Case Study Section

A section component built for Framer. Live preview below — interact with it directly before you buy.

Buy this component — $8 Preview Get All-Access instead

About Case Study Section

Case Study Pro is an animated portfolio case-study section for Framer. Numbered projects expand accordion-style with ghost-reveal titles and a result-metrics row that reveals alongside each description. Fully responsive with built-in SEO markup and accessible keyboard navigation — perfect for agencies, studios, and freelancer portfolios.

Features

→Accordion-style expandable project descriptions
→Result-metrics row reveals alongside each description
→Ghost-reveal title animation on hover and open
→Supports image, video, or SVG media per case study
→Adjustable media zoom and corner radius per case
→"View case study" link button, links out when set
→Optional "first case open by default" toggle
→Two-column header — eyebrow, large heading, side description
→Fully responsive — 4 breakpoints, auto-scales type and spacing
→9 independent font controls across heading, title, stats, and more
→Per-element uppercase toggles for full typographic control
→Adjustable accordion open and close animation speed
→Semantic ol/li/h3 markup — screen-reader and keyboard accessible
→Lazy-loaded images and viewport-aware video autoplay
→Static-safe canvas and export rendering
→Works out of the box — no setup needed

Use Cases

→Agency and studio portfolio pages
→Freelancer case study and project pages
→SaaS customer success story sections
→Product design and UX portfolio sites
→Marketing agency results showcases
→Consulting firm client work pages
→Web development studio portfolios
→Branding agency project galleries
→Startup "our work" and traction pages
→Editorial and magazine project features

Best value

Get every component with All-Access — $129

Case Study Section and all 122 others, current and future.

Get All-Access

More Section

Hover Media Cards

Kanban Board