---
id: "aw-el-00b24c8b-b5bf-400e-844d-94936bf8b9b5"
source: https://www.awwwards.com/inspiration/sustainability-material-3d-floema
author: "Bürocratik (burocratik)"
media: "video, 1600x1200, 10.7s"
model: claude-opus-5-5
generated: 2026-10-31
---
# Rotating Material Cube Selector

## Summary
A sustainability section on a flat lime-yellow page where a textured 3D cube spins inside a thin orbit circle and swaps its material (dark recycled plastic, brown high-pressure laminate, grey steel) as you pick from a list. Small swatch tiles ride the orbit, and a characteristics paragraph updates beside it, making it a clear pattern for explaining materials with one interactive object.

## Style
- Theme: light (saturated lime field with dark ink)
- Mood: tactile, informative, confident, eco
- Tags: 3d-cube, material-switcher, webgl, orbit-ring, swatches, sustainability, product-detail
- Category: Features, 3D

## Palette
| Role | Hex |
|---|---|
| Lime background | #E0DE5F |
| Olive shade | #B0A051 |
| Recycled plastic | #403930 |
| Ink | #221D18 |
| Laminate brown | #6D5835 |
| Light laminate | #89775F |
| Steel grey | #6F6F6E |
| Nav pill white | #FBFBF9 |

## Typography
- Material list (top-left): sans regular, about 2.3% of the frame height, three lines; the active line is ink with an arrow prefix, the others ink at about 35%. Closest free: Manrope 400.
- Section label: uppercase sans 7px semibold.
- Characteristics paragraph and right-column copy: sans 7px to 8px, leading 1.4, ink.
- Buttons and nav pills: uppercase sans 6px to 7px. Manrope 600.

## Layout
- 4:3 (1600x1200) on a flat lime field with no texture.
- Orbit circle: centred at about 50% x and 50% y, diameter about 45% of the width, 1px ink stroke; an arc of the stroke is darker and thicker to show progress.
- Swatches: three 28px squares with 4px radius placed on the circle at 12, 8 and 4 o'clock.
- Cube: centred, about 25% of the frame width, lit from the top-left with soft contact shading.
- Left column: material list at the top, characteristics block with a dark pill button at the bottom.
- Right column: a 1px vertical rule, a short paragraph and a photo (about 11% of the width) of a bench in an urban setting.
- Top-right: white nav pills and a language switch.

## Elements
- Material list with active arrow.
- Textured cube with a recessed circular medallion carrying an embossed placeholder logo on one face.
- Orbit circle with a progress arc.
- Three swatch tiles (dark plastic, steel, laminate) on the orbit.
- Characteristics text block and a small dark pill button with an arrow.
- Right column copy and bench photo.

## Motion
- 0.4s to 2.4s: the dark plastic cube rotates slowly (about 15deg per second) on Y with a slight X tilt.
- About 3s: the arrow moves to the second item; the cube spins quickly (about 90deg in 600ms, ease-out) and its texture swaps to brown laminate; the paragraph crossfades.
- 4.3s and 6.2s: laminate cube tumbles at different angles; the progress arc grows along the right side of the orbit.
- 8.2s: switch to steel, same fast spin; the medallion becomes light grey.
- 10.1s: steel cube settles nearly face-on.
- List and text changes crossfade in about 300ms; the cycle repeats about every 3.5s per material.

## Rebuild it
1. Section: `relative h-screen bg-[#E0DE5F] text-[#221D18]` with three absolutely placed columns.
2. Canvas: a React Three Fiber scene with one `boxGeometry` (args 1, 1, 1) and three PBR materials (albedo, roughness and normal maps); keep the active material in state.
3. Idle spin: in `useFrame`, add `delta * 0.26` to rotation.y. On change, tween rotation.y by +PI/2 with an ease-out over 0.6s and swap the material at the midpoint.
4. Orbit: an SVG circle with `strokeDasharray` for the progress arc; animate `pathLength` with Motion from 0 to 1 over each material's duration.
5. Swatches: absolutely positioned 28px squares at angles 0deg, 240deg and 120deg on the circle using `transform: rotate(a) translateY(-r) rotate(-a)`.
6. Text: `AnimatePresence mode="wait"` with opacity transitions of 0.3s; list items toggle `opacity-35` and an arrow span.

## Generation prompt
A flat lime yellow website section with a photoreal textured cube in the centre (dark speckled recycled plastic with a round embossed medallion), rotating inside a thin black orbit circle with three small material swatch tiles on its path; a short material list top-left with an arrow on the active item, a small paragraph and dark pill button bottom-left, a narrow right column with text and a bench photo; clean, tactile, sustainable design.