--- title: "How to Build a Portfolio Reveal Hero in Framer" description: "Build a portfolio reveal hero in Framer — a canvas-based image transition, timing and sequencing tips, and a ready-made drop-in component option." canonical_url: "https://framerhub.io/blog/portfolio-reveal-hero-framer" last_updated: "2027-03-05T00:00:00.000Z" --- A portfolio reveal hero — where project images appear through a dramatic wipe, distortion, or canvas-driven transition rather than a static grid or simple crossfade — is one of the highest-impact first impressions a creative or agency site can make. It's also genuinely more involved to build well than most of the effects in this series, since the most striking versions typically require canvas or WebGL rather than pure CSS. Here's the approach, from a simpler CSS version to a canvas-based one. ## Two Tiers of This Effect Before building, it's worth deciding which tier actually fits your project: 1. **CSS-based wipe/crossfade** — images transition using `clip-path` animation or a simple crossfade. Simpler to build and maintain, lighter to run, and still genuinely effective for most portfolios. 2. **Canvas/WebGL-based distortion transition** — images transition through a pixel-level effect (ripple, displacement, glitch-style wipe) rendered on canvas. More visually striking and distinctive, but meaningfully more complex to build and heavier to run. Most portfolios are well served by tier 1. Reach for tier 2 specifically when the transition itself needs to be a genuine brand signature — a distinctive, hard-to-replicate visual moment that's part of what makes the site memorable, not just a functional way to move between images. This is worth deciding deliberately rather than defaulting to the more impressive-looking option, because the two tiers aren't just different in visual complexity — they're different in how much of your project's time budget they consume. A CSS wipe can be built, tuned, and shipped in an afternoon. A correct, performant, cross-browser WebGL transition is realistically a multi-day undertaking if you're building the shader work from scratch, which is time that, for most freelance and agency timelines, is better spent elsewhere unless the reveal effect specifically is the differentiator the project needs. ## Why the Hero Matters Disproportionately for Portfolios For a creative portfolio specifically, the hero section is doing more work than it typically does on a SaaS or product site — it's not just an introduction to scroll past on the way to the "real" content, it often *is* the pitch. A visitor evaluating a designer, photographer, or agency is forming a craft judgment within the first few seconds, and the hero's visual execution is itself evidence of the quality of work they can expect throughout the rest of the site. That's part of why this specific effect gets disproportionate attention and investment relative to its actual technical footprint — it's frequently the single highest-leverage section on the entire site for a portfolio's actual business goal (getting hired or getting inquiries), which justifies spending more design and engineering effort on it than an equivalently-sized section elsewhere on the same page. ## Building Tier 1: CSS Clip-Path Wipe ```jsx import { motion, AnimatePresence } from "motion/react" import { useState, useEffect } from "react" export function PortfolioRevealHero(props) { const { images, interval } = props const [index, setIndex] = useState(0) useEffect(() => { const id = setInterval(() => setIndex((i) => (i + 1) % images.length), interval * 1000) return () => clearInterval(id) }, [images.length, interval]) return (
) } ``` The `clipPath` values are doing the actual reveal work — animating `inset()` from fully clipped (the image entirely hidden behind an inset mask) to fully revealed produces a directional wipe, and the specific direction (top-to-bottom entry, left-to-right exit in this example) can be varied per transition for more visual variety across the cycle. The custom cubic-bezier easing (`[0.76, 0, 0.24, 1]`) is a sharp, confident "snap" curve rather than a standard ease — a detail that matters more than it might seem, since this specific transition style is trying to feel deliberate and bold, not gentle. ## Building Tier 2: Canvas-Based Distortion (Conceptual Overview) A full WebGL displacement transition is beyond what fits in a single code snippet here, but understanding the technique conceptually helps you evaluate whether it's worth the added complexity for your project. The core approach: two images are loaded as textures, and a shader blends between them using a displacement map (often a noise texture) that controls *where* each pixel transitions first — rather than a uniform fade or clean wipe, different regions of the image cross over at different times based on the displacement map's values, producing an organic, rippling, or glitch-like transition rather than a geometric one. Libraries like `three.js` (for the WebGL rendering) combined with a custom fragment shader are the typical toolkit, and this is genuinely a different skill set than the CSS/React work covered elsewhere in this series — closer to shader programming than component styling. Given that complexity, this is one of the clearer cases in this whole series where reaching for a pre-built component is the pragmatic choice for most teams, rather than a shortcut — the effort-to-result ratio of hand-building a correct, performant WebGL transition from scratch rarely makes sense for a single hero section on one project. ## Timing and Sequencing - **First image should appear immediately**, not after a delay — a portfolio hero with a blank loading state before the first reveal wastes the first, most valuable second of a visitor's attention. - **Transition duration (0.6-1.2s) matters more than it seems.** Too fast and the reveal is barely perceptible as an intentional effect rather than a glitch; too slow and it starts to feel like the page is loading rather than performing a deliberate transition. - **Interval between images (3-6s) should give a visitor enough time to actually register each image** before the next transition begins — this is a showcase, not a slideshow racing through content. - **Consider a brief pause on the final image in an autoplay sequence**, or looping back to the first, rather than the cycle abruptly stopping — an autoplay sequence that just stops can look like the animation broke rather than finished intentionally. ## Drop-In Option: Portfolio Reveal Hero FramerHub's [Portfolio Reveal Hero component](/components/portfolio-reveal-hero) implements a canvas-based reveal transition — the tier 2 approach described above — with image set, transition style, timing, and interaction mode exposed as property panel controls, without requiring any shader or WebGL knowledge to use. It's part of FramerHub's [component library](/components), available through the [Components plugin](/plugins/framer-components), and is exactly the kind of effect worth using a pre-built component for rather than hand-building the underlying rendering pipeline from scratch. ## Pairing With the Rest of Your Portfolio A striking reveal hero sets an expectation the rest of the page needs to live up to — it shouldn't be dramatically more polished than the portfolio grid, case studies, or about section that follow it, or the site reads as front-loaded rather than consistently crafted throughout. If you're planning the full portfolio site around this hero, our [best Framer portfolio templates guide](/blog/best-framer-portfolio-templates) covers broader structural and template choices worth deciding alongside the hero treatment itself, rather than in isolation. ## Where This Effect Works Best - **Creative and design portfolio sites**, where the hero's visual sophistication is itself part of the pitch. - **Agency "our work" landing sections**, using the reveal as an immediate, attention-grabbing entry point into a body of client work. - **Photography and visual-arts portfolios**, where the transition style can be tuned to complement the specific visual tone of the work being showcased. It's overkill for content-first or information-dense sites (SaaS, documentation, enterprise tools) where a visitor's priority is quickly understanding what you do, not being impressed by a visual transition — reserve this pattern for contexts where visual craft is itself part of the value proposition. ## Performance Notes Portfolio images used in a reveal hero are usually large, high-quality photography — exactly the kind of asset that's easy to accidentally ship unoptimized. Compress aggressively (modern formats like WebP or AVIF at reasonable quality settings usually look indistinguishable from a much larger source file), lazy-load images beyond the first one or two in the cycle rather than loading the entire set upfront, and if you're using a canvas/WebGL approach, budget extra load time for texture decoding, which is a real, additional cost beyond standard image loading. For visitors on slower connections, consider whether a lighter CSS-based fallback (tier 1) is worth serving instead of forcing the full WebGL experience — a fast, simple hero beats a slow, impressive one for the visitors who'd otherwise bounce before it finishes loading. ## FAQ **What is a portfolio reveal hero?** It's a hero section pattern where project images are revealed dramatically — through a wipe, distortion, or canvas-based transition — as a visitor scrolls or interacts, rather than simply appearing in a static grid. It's meant to function as both a striking first impression and an introduction to real work. **Do I need WebGL or canvas for a portfolio reveal effect?** Not always — simpler versions can use CSS clip-path wipes or crossfades. More elaborate versions with pixel-level distortion, ripple, or displacement transitions between images typically need canvas or WebGL, since those effects require per-pixel control CSS can't provide. **How many images should cycle through a reveal hero?** 4 to 8 is the practical range for most portfolios — enough to represent a range of work without the hero section overstaying its welcome before a visitor scrolls further to see the full portfolio grid. **Should a portfolio reveal hero autoplay or wait for interaction?** A brief autoplay sequence on load (2-4 images cycling automatically) followed by manual or scroll-driven control afterward is a common, effective pattern — it demonstrates the effect immediately without requiring a visitor to know they should interact, while still giving them control once they've seen it work. **Does a heavy hero animation hurt page load performance?** It can, particularly if it's WebGL-based and loading several full-resolution images upfront. Lazy-load images beyond the first one or two, compress aggressively, and consider a lightweight static or CSS-based fallback for slower connections rather than forcing every visitor through the full animated experience.