Shape selected work into a guided showcase where each project has room to earn the click before the visitor moves on.
Ribbon Drift is built for pages where a portfolio needs motion before the click. Project cards, visuals, titles, and fragments of work move like a drifting ribbon across the section, creating a sense of flow without turning the page into a full carousel or WebGL scene.
Use Ribbon Drift when a studio, agency, or creative brand wants selected work to feel curated, alive, and connected. The page job is momentum: the visitor should sense the range of work while still knowing where to click, what each project is, and how to continue.
The production risk is turning the portfolio into decoration. A drifting ribbon can look premium and still fail if project names, links, focus states, and mobile fallback are weak. The motion should support discovery, not hide the actual work.
You can preview it now. Upgrade to Pro for instant install access.
You can preview it now. Upgrade to Pro for instant install access.
You can preview it now. Upgrade to Pro for instant install access.
You can preview it now. Upgrade to Pro for instant install access.
A creative studio can use Ribbon Drift on its homepage to preview selected work before the visitor reaches the full portfolio. Project visuals drift across the section with short labels and clear links. The outcome is appetite: visitors get a moving sense of the studio’s range without being forced into a heavy gallery.
Not for large work archives, comparison-heavy portfolios, filterable case-study libraries, or pages where visitors need to scan every project quickly.
Not for project sections where the ribbon hides titles, makes links hard to reach, or turns real work into background texture.
Keep the media set controlled, pre-size images, compress assets, animate transforms instead of layout, and pause ribbon movement when the section is offscreen. Avoid loading a whole portfolio archive into a decorative strip.
Project items need readable names, links, and focus states in DOM order. On mobile, collapse the ribbon into stacked cards, a simple horizontal scroll, or a tap-safe project list. Reduced-motion users should see the same work without drifting movement.
| Prop | Type | Default | Description |
|---|---|---|---|
driftSpeed | number | 1 | Speed of the ribbon drift. |
imageSize | number | 1 | Scale multiplier applied to the ribbon images. |
showNames | boolean | true | Shows the project name on hover. |
ribbonColor | color | #000000 | Color of the section-break reveal text fill. |
Use Ribbon Drift when a portfolio or campaign section needs a moving band of selected work instead of a static project row.
Not exactly. It can behave like a visual showcase, but the goal is a drifting portfolio strip, not a slide-by-slide carousel that traps the section.
Keep it curated. Four to eight strong items usually work better than a long archive. If the visitor needs to scan many projects, use a portfolio grid.
Yes. Project names, short context, and links should remain readable and accessible. The motion can add energy, but it should not make the work harder to understand.
Use stacked project cards, native horizontal scroll, or a simplified tap-friendly list. Do not force a desktop drifting ribbon onto a narrow screen.
Stop the drifting motion and show the project items in a stable layout. A short fade is fine, but continuous movement should be removed.
Yes. A custom version should define project data, ribbon direction, speed, visual treatment, focus behavior, mobile fallback, performance budget, source handoff, and implementation notes.
Need a custom effect? Tell us what to create.
