FOG

About this template

FOG is a Framer portfolio template for branding studios, design agencies, and independent creatives. Soft blur, film grain, and scroll-driven motion meet bold editorial layouts and CMS-powered case studies, so your work comes into focus.

What's inside

Home page: a statement hero, selected work, an about section with a looping marquee, team, services, testimonials, client list, and contact form. All Home page text is managed in the CMS.

Responsive layouts: every page and component is adjusted for desktop, tablet, and mobile, with breakpoint-specific type sizes, spacing, and layouts.

CMS case studies: a Work page with cards filterable by service category, and detail pages driven entirely by CMS fields: story, gallery, testimonial, website link, and color palette.

Sticky services section: scroll through five services, each with its own image and title, controlled through the CMS.

Team section: a showcase for your people, with names and roles.

Testimonials: a moving slider with client photos, names, and roles.

Client list: a clean wall of brand names that you can edit in seconds.

Contact page and form: a ready-to-use form with default, focus, error, and success states.

Reveal footer: a footer that appears as the last section stays pinned in place.

Atmosphere components: Progressive Blur for the navigation and edges, an animated Noise grain overlay, and an interactive Blur Hover Text effect, all adjustable in the right panel.

Button system: one component covers every style, size, and state, plus icon buttons with open and close variants.

404 page and a built-in style guide documenting colors, typography, spacing, components, and CMS usage.

Good to know

Fonts: Headings use Unbounded and body text uses Outfit. Both are free Google Fonts available in Framer's font picker, so no extra licenses or uploads are needed.

Images: Placeholder images are sourced from Unsplash and Lummi. Replace them with your own work before launch.

Support: abashgwen@gmail.com