---
id: "aw-el-362d84b7-548f-4230-a994-a1f1da580940"
source: https://www.awwwards.com/inspiration/gallery-transition-oryzo-ai
author: "Lusion (lusion)"
media: "video, 1600x1200, 8.0s"
model: claude-opus-5-5
generated: 2026-10-31
---
# Filmstrip Gallery Into 3D Scene

## Summary
A dark, warm product site where a horizontal filmstrip of lifestyle photos slides past a large framed centre slot, each image growing as it reaches the middle, until a magazine-style cover becomes a window that expands into a full-screen 3D desk scene. It is an elegant example of using a gallery as a portal into the next section instead of a hard cut.

## Style
- Theme: dark (espresso brown with ember glow)
- Mood: warm, cinematic, tactile, premium, moody
- Tags: gallery, filmstrip, scroll-transition, portal, 3d-scene, editorial, progress-bar
- Category: Motion, Features

## Palette
| Role | Hex |
|---|---|
| Background | #1A1715 |
| Espresso | #311F17 |
| Ember glow | #4D291B |
| Walnut | #705C46 |
| Sage grey | #9A9179 |
| Cream | #CCBDA4 |
| Knit red | #8F1C14 |
| Copper | #C86E3B |

## Typography
- Side caption ("So portable, it's wearable" style two-liner): first line sans uppercase 8px tracked 0.08em in grey, second line sans medium 12px in cream. Inter (500).
- Nav links and logo placeholder: sans medium 7 to 8px, uppercase, tracking 0.1em. Inter (500).
- Cover headline inside one gallery image: big high-contrast serif caps over a photo, magazine style. Playfair Display (700).
- Final scene: small paragraph sans 8px and a two-line uppercase sans claim at the bottom left, medium 14px, white. Inter (500).

## Layout
- 4:3 recording (1600x1200) of a 16:9 site panel centred on a dark frame with a soft copper radial glow behind it.
- Panel: logo top left, four nav links top right, a caption block at the left edge at about 30% height.
- Filmstrip: a single row of portrait thumbnails about 9% of panel width, vertically centred, 4px gaps; the active slot at about 35% from the left is about 3.5x larger (3:4 portrait) with a 1px hairline frame.
- A short cream vertical progress bar sits at the right edge at about 25% height; "scroll to continue" with a circle icon is centred at the bottom.
- Final scene: full-bleed render, a left text column over a blurred overlay, small caption at the bottom right.

## Elements
- Lifestyle photos: a woman in black activewear mid-yoga, a cork disc held as sunglasses over a freckled face, a cork disc in a red knit pocket, a cork disc in a smiling mouth, a swimsuit with a cork disc, a cap on a hand.
- Magazine cover image with a huge serif title, issue number and a paper coffee cup on a teal cutting mat.
- 3D desk scene: pegboard wall, game controller, green keyboard, paper cup on a cork coaster, pencils on a cutting mat, wooden drawers.
- Copper glow vignette around the panel.

## Motion
- 0 to 3s: scroll moves the strip left; the image entering the centre slot scales up from thumbnail to full slot (about 600ms, ease-out) while the previous one shrinks back; inside the slot the photo is revealed with a vertical wipe.
- 3 to 4.6s: the magazine cover lands in the slot; the strip continues and the other thumbnails slide out to the left.
- 4.6 to 6s: thumbnails disappear, the caption fades to 30%; the cover's inner photo crossfades into the 3D desk scene still inside the frame.
- 6 to 7.5s: the frame expands to full-bleed (about 1200ms, ease-in-out), revealing the left text column and claim.
- The right progress bar grows steadily throughout.

## Rebuild it
1. Panel: `relative aspect-video bg-[#1A1715] overflow-hidden` inside a page with `background: radial-gradient(60% 60% at 50% 60%, #4D291B, #1A1715 70%)`.
2. Make the section sticky (`h-[400vh]` wrapper, `sticky top-0` panel) and read `scrollYProgress` with Motion `useScroll`.
3. Strip: a flex row whose `x` is `useTransform(progress, [0, 0.6], ['0%', '-70%'])`; for each item, compute distance to the slot centre and map it to `width` and `height` so the centred one is 3.5x bigger.
4. Slot reveal: `clipPath: inset(100% 0 0 0)` to `inset(0)` as each image becomes active.
5. Portal: from 0.6 to 1 progress, animate the active item's `inset` from its slot rectangle to `inset(0)` using `useTransform` on top, left, width and height (or a `layout` animation on a state change).
6. Render the final scene as a video or react-three-fiber canvas inside that item, and overlay the text column with `backdrop-blur-md`.

## Generation prompt
A moody warm website scroll animation for a cork lifestyle product: on a dark espresso background with a copper glow, a horizontal filmstrip of editorial photos (yoga pose, cork disc as sunglasses, cork disc in a red knit pocket, a magazine cover with a paper coffee cup) slides past a large framed centre slot, each image growing as it arrives, until the last frame expands into a full-screen 3D desk scene with a pegboard, keyboard and a cup on a cork coaster; cinematic, premium, no logos.