---
id: "aw-el-bb6d3e45-cfd7-4578-af7c-65353ce14ce8"
source: https://www.awwwards.com/inspiration/section-animation-and-transition-the-renaissance-edition
author: "Shopify Design (shopifydesign)"
media: "video, 1600x1200, 5.6s"
model: claude-opus-5-5
generated: 2026-10-31
---
# Renaissance Painting Section Transitions

## Summary
A product release page staged inside Renaissance-style oil paintings: each section is a painted scene where figures hold modern objects (a phone, floating product cards, a laptop of code), titled with a huge white grotesk word and a serif italic subtitle with a swash initial. Scrolling pushes the camera into the painting, flies objects in with depth, and tears the canvas away like paper to reveal a light product screenshot section. A striking mash-up of art history and SaaS release notes.

## Style
- Theme: dark (oil-painting shadows) with a light parchment reveal
- Mood: grand, witty, theatrical, rich, editorial
- Tags: renaissance, oil-painting, section-transition, torn-paper, parallax-depth, product-release, serif-italic, scroll-storytelling
- Category: Motion, Art

## Palette
| Role | Hex |
|---|---|
| Varnish black | #161314 |
| Parchment | #E4E4DC |
| Umber shadow | #281C1B |
| Velvet brown | #432824 |
| Linen beige | #B3AA9C |
| Oak brown | #5B483F |
| Stone grey | #7A716C |
| Deep oxblood | #130605 |

## Typography
- Section titles ("Agentic", "Online"): neo-grotesk, bold, sentence case, cream white, about 10% of frame height, -0.03em tracking. Inter Bold or Geist SemiBold.
- Subtitles: high-contrast serif, regular, two lines, about 2.5% of frame height, with an oversized swash italic initial capital. Cormorant Garamond with Pinyon Script for the initial.
- Section index on the left: tiny grotesk list (about 14 items) with roman numerals right-aligned, the active item underlined. Inter 8px.
- Header: small grotesk labels, a three-line edition title top-left and a white pill button top-right.

## Layout
- 4:3 frame (1600x1200) of a full-bleed page.
- Painting fills the viewport; title sits on the left third at about 50 to 70% of the height, the subtitle directly below and slightly indented.
- Fixed index column at the bottom-left (about 8% wide); fixed header 32px tall with a translucent dark gradient behind it.
- Light section: parchment background with a torn, deckled top edge; a heading block on the left third and a 16:9 product screenshot (about 45% wide, 4px radius) in the centre, with two small timestamp chips floating right.
- Objects layered in front of the painting cast soft shadows and overlap type for depth.

## Elements
- Painted scenes: a woman in a red velvet dress in an arched hall; a figure in a satin robe at a desk with code monitors and a sketched product page; heavy red drapes against a blue sky.
- Floating props: product cards fanning out like a deck, a phone in a hand, a small app tile with a pink icon.
- Browser screenshot: a commerce admin interface with a chat panel and a play button overlay.
- Torn paper edge: jagged white-grey rip across the top of the light section with a soft shadow.
- Index list: section names with roman numerals, current one highlighted by a short rule.

## Motion
- 0 to 1200ms: the camera dollies into the painting (scale 1 to 1.15) while the title fades up and the card deck spins out toward the viewer with a 3D rotateY.
- 1200 to 2200ms: the next layer slides up: a phone held by a painted hand rises into frame, and a dark purple panel with a screenshot slides in from the bottom (about 600ms, ease-out).
- 3200 to 4300ms: new scene; red drapes part horizontally, the "Online" title moves from the bottom-left to the centre as the camera tracks right.
- 4300 to 5300ms: the painting tears away upward along a jagged edge, revealing the parchment section and its screenshot (about 700ms, cubic ease-in-out).
- The left index updates its active item on every section change.

## Rebuild it
1. React: sections as `sticky top-0 h-screen` stages inside tall wrappers so each scroll segment scrubs one scene.
2. Each scene stacks layers: background painting, mid props, foreground props, type; parallax them with Motion `useTransform(progress, [0, 1], [0, -40 * depth])` and scale the background 1 to 1.15.
3. Card deck: several `motion.div` cards with `[transform-style:preserve-3d]` and staggered `rotateY` and `x` tied to progress.
4. Torn edge: an SVG with a jagged polygon path as a mask on the light section; animate its `y` from 100% to 0 with the section progress.
5. Titles: `text-[10vw] font-bold tracking-tight text-[#E4E4DC]`; subtitles in Cormorant Garamond with a Pinyon Script `::first-letter` at 2.5em.
6. Index: fixed list using `IntersectionObserver` or scroll progress to set the active item, animating a `layoutId` underline.

## Generation prompt
A theatrical product release web page staged in Renaissance oil paintings: a noblewoman in red velvet in an arched hall with a fan of modern product cards flying toward the viewer, a robed figure at a desk with glowing code screens and sketched layouts under parting red drapes, huge white sans titles with elegant italic serif subtitles, and the canvas tearing away like paper to reveal a clean parchment section with a product screenshot; rich, witty and cinematic.