---
id: "aw-el-abae7fcd-2c5a-4e66-ac54-6130803dc229"
source: https://www.awwwards.com/inspiration/footer-interactive-particles-oryzo-ai
author: "Lusion (lusion)"
media: "video, 1600x1200, 8.0s"
model: claude-opus-5-5
generated: 2026-10-31
---
# Swirling Bean Particle Footer

## Summary
A near-black website footer where thousands of glossy 3D beans drift in a diagonal stream and swirl into a vortex around the cursor, lit by warm copper light, behind a bold uppercase statement, a newsletter field and contact links. It is worth studying for how an interactive particle field turns the usually ignored footer into a memorable final moment.

## Style
- Theme: dark (black with warm copper light)
- Mood: rich, moody, tactile, cinematic, witty
- Tags: footer, particles, webgl, cursor-interaction, instanced-mesh, newsletter, dark-luxury
- Category: Footer, 3D

## Palette
| Role | Hex |
|---|---|
| Footer black | #090705 |
| Outer frame | #191716 |
| Coffee glow | #311E18 |
| Copper glow | #48271D |
| Shadow brown | #160C07 |
| Deepest black | #050302 |
| Bean highlight | #C27A3A |
| Cream type | #E4D8C8 |

## Typography
- Statement: heavy grotesque (about 700), uppercase, right-aligned, two short paragraphs of two lines each, leading 0.95, cream; cap height about 1.6% of the frame (around 30px on the real site). Closest free: Archivo 700 or Inter Tight 700.
- Labels and links: uppercase sans about 7px (11px real), 0.04em tracking, cream at 80%. Inter 500.
- Promo box text: small uppercase with the first two lines in a warm orange-red.
- Disclaimer: tiny uppercase right-aligned paragraph.

## Layout
- 4:3 capture; the footer appears as an inset rectangle (about 1100x620 of 1600x1200) on a darker frame with a radial copper glow behind its top edge.
- Footer grid: small wordmark top-left, a pixel-built corner mark about 30px at 30% x, nav links tiny at the top-right, the statement in the right half below it.
- A brown pill button (about 110x28px, fully rounded) right-aligned under the statement.
- Lower half: a dashed-outline promo box on the left (about 180x80px), a newsletter label with an underlined input and arrow in the centre, contact columns below, legal links along the bottom, and a cream vertical bar on the right edge as a scroll indicator.
- The particle layer fills the whole footer behind the text.

## Elements
- Particle field: glossy oval beans with a centre crease, rim-lit warm brown, varying in size by depth (fog fades distant ones).
- Statement copy (placeholder) and pill button.
- Newsletter input: label, underline, arrow glyph.
- Contact blocks (business and general), social links, legal links.
- Dashed promo box with a small pill button inside.

## Motion
- 0.3s to 3.2s: beans drift as a loose diagonal river from the bottom-right toward the top-left at about 60px per second, tumbling slowly.
- 4.6s: the cursor rests near the lower centre; beans begin to bend toward it.
- 6.1s: a tight vortex forms around the cursor (radius about 120px), brightening as beans crowd into the light.
- 7.5s: the vortex relaxes back into the stream over about 1.5s.
- Response uses spring-like easing (attraction ramps in over about 400ms); rotation per bean is continuous; the loop is seamless.

## Rebuild it
1. Footer: `relative bg-[#090705] text-[#E4D8C8] overflow-hidden min-h-[80vh]` with a grid of content above a `Canvas` placed `absolute inset-0 -z-0`.
2. Particles: React Three Fiber `instancedMesh` with about 3000 instances of a squashed sphere (scale 1, 0.7, 0.5) and a `meshStandardMaterial` (color #6B3B1E, roughness 0.35).
3. Lighting: a warm point light (#FF9A55) that follows the pointer plus a dim ambient light; add fog to fade depth.
4. In `useFrame`, advect each bean along a curl-noise flow field; within 2 world units of the pointer add a tangential force (swirl) plus a weak inward pull, damped by 0.92 per frame.
5. Text: `font-bold uppercase leading-[0.95] text-right text-3xl` with Motion `whileInView` line reveals (y 20 to 0, 0.5s, stagger 0.06).
6. Disable the canvas on low-power devices and fall back to a static render.

## Generation prompt
A dark luxury website footer at night: thousands of glossy roasted coffee-bean-like grains swirling in a diagonal stream and forming a vortex around an invisible cursor, lit by warm copper light with deep shadows, a bold uppercase cream statement on the right, a small brown pill button, a minimal newsletter field and tiny uppercase contact links; cinematic, rich, moody, no logos.