---
id: "aw-el-2da5d57f-8404-4490-ac6c-041a71ea3242"
source: https://www.awwwards.com/inspiration/product-page-floema
author: "Bürocratik (burocratik)"
media: "video, 1600x1200, 11.3s"
model: claude-opus-5-5
generated: 2026-10-31
---
# Street Furniture 3D Product Page

## Summary
A product page for an urban bike charging station: a rotatable 3D model on warm off-white, a clean title and request button, technical elevation drawings, a slide-in configurator for structure and colour, a spec table, and a lime footer with a giant black geometric mark and line drawings of street furniture. It is a great model for industrial products, mixing real-time 3D with blueprint-like documentation.

## Style
- Theme: light (warm off-white with a lime footer)
- Mood: industrial, clean, practical, crafted, confident
- Tags: product-page, 3d-viewer, configurator, technical-drawing, spec-table, drawer, footer
- Category: Features, 3D

## Palette
| Role | Hex |
|---|---|
| Background | #EEEAE4 |
| Dim overlay | #B7B1AE |
| Footer lime | #DDDB5F |
| Panel brown | #4C342A |
| Rule beige | #DAD5CE |
| Drawer | #EFEBE6 |
| Product orange | #C9472A |
| Ink | #151515 |

## Typography
- Product title: neo-grotesk sans, regular 400, sentence case, tight tracking (-0.02em), about 4% of frame height, near black. Inter (400) or Albert Sans (400).
- Drawer title ("Your Product"): same sans, about 2.5% of frame height.
- Body and spec text: sans regular 9 to 11px equivalent, 1.4 line height; small grey left-column labels in the spec table. Inter (400).
- Nav, back link, buttons and tags: sans medium 7 to 8px, uppercase, tracking 0.06em, in pills. Inter (500).

## Layout
- 4:3 canvas (1600x1200) showing a full-width page.
- Product view: a left half for the 3D model (centred, about 55% of the height) with a vertical +/- zoom control at the right edge of that half; a right column starting at 52% with tag, title, a two-column "what is it" label and paragraph, and a black pill button.
- A 1px vertical rule separates the halves; technical drawings sit along the bottom of the right column with dimension lines.
- Top bar: small back pill at left, a pill-shaped nav of 4 links and a language switch at right.
- Configurator: a drawer about 34% of the width, 16px radius, sliding over a dimmed page, with sections of 52px square option tiles (6px radius, 1px border, check badge on selection) and a bottom pill CTA.
- Spec table: label column 15% and value column, rows divided by 1px #DAD5CE rules; colour list in two columns with 10px dots.
- Footer: full-bleed lime, the black mark filling the left 35%, line drawings and three address columns at right, links and legal row at the bottom.

## Elements
- WebGL model of a tall orange-red station with a dark slatted front, handlebars mount, display panel with a bike icon, side cable and a pump.
- Soft cast shadow on the floor plane.
- Red "Urban" tag pill.
- Black pill button with a small icon box.
- Line-art elevations in 1px grey with dimension ticks.
- Configurator option tiles with swatches and a "View more" chip.
- Colour list with named swatches (white, black, beige, brown, ochre, greens, cobalt, reds).
- Lime footer with a giant black arrow-like mark, outline drawings of benches and racks, a circled R glyph, and a strip of partner logo placeholders.

## Motion
- 0 to 4s: dragging rotates the model (about 90deg per 600ms of drag) with inertia; it eases to rest over about 400ms.
- About 5s: clicking the button dims the page (300ms) and slides the drawer in from the right (450ms, ease [0.22,1,0.36,1]).
- 7 to 9s: drawer closes; the page scrolls to the spec table, rows fading up 8px with a 40ms stagger.
- 10 to 11s: the lime footer slides up with the black mark parallaxing slightly slower.

## Rebuild it
1. Layout: `grid grid-cols-2 min-h-screen bg-[#EEEAE4] divide-x divide-[#DAD5CE]`.
2. 3D viewer: react-three-fiber `Canvas` with a GLB model, `OrbitControls` (no zoom on wheel, damping 0.08), a `ContactShadows` plane and external +/- buttons adjusting camera distance.
3. Right column: title `text-4xl tracking-tight`, a `grid grid-cols-[80px_1fr] gap-4 text-xs` description and a `rounded-full bg-black text-white text-[9px] uppercase h-7 px-3` button.
4. Drawer: `AnimatePresence` with a `fixed inset-0 bg-black/20` scrim and `motion.aside` `x: '100%'` to 0, `rounded-2xl bg-[#EFEBE6] w-[34vw] p-6`.
5. Spec table: `dl` grid rows with `border-t border-[#DAD5CE] py-3`; colour items as `flex items-center gap-2` with 10px dots.
6. Footer: `bg-[#DDDB5F]` with an SVG mark at `w-[35%]` and `useScroll` driven `y` parallax.

## Generation prompt
A clean industrial product page for an urban bike charging station on warm off-white: a rotatable 3D model of a tall orange-red station with dark wooden slats and a small display, a calm sans-serif title and a black pill button, thin technical elevation drawings with dimensions, a slide-in configurator drawer with colour swatch tiles, and a bright lime footer with a giant black geometric mark and line drawings of benches and bike racks; precise, practical, no logos.