Featured
Audiovisuel Février 2026

Project Hero — Image Background

A composable hero section with overlay gradient, meta line, and badge support.

Web & Apps Case Study

Project Hero — Color Background

Falls back to a solid color when no background image is provided.

EditorialRow + GridItem

30-column grid with span, push, and offsetY

Grid demo 1
span=10, push=0
Grid demo 2
span=10, push=10
Grid demo 3
span=10, push=20
Wide image
span=18 — dominant left
Narrow image
span=12 — secondary right
No offset
offsetY=0
Offset 2vw
offsetY=2
Offset 4vw
offsetY=4

CaptionedImage

Below caption vs. overlay caption

Below caption demo
This caption sits below the image in an italic style.
Overlay caption demo
This caption overlays the image with a gradient.

TextBlock

Width presets, dropcap, and lead paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum vestibulum. Cras vehicula, mi eget laoreet venenatis, ante magna fermentum augue, vel vehicula est turpis eget ligula.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Section Heading

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

This is a blockquote styled within a TextBlock. It uses the accent-teal border.

This is a narrow TextBlock (max 620px) — ideal for focused reading passages with shorter line lengths.

PullQuote

The best stories are the ones we haven't told yet — the ones still waiting in the light.

— Damien Rayuela

Verse

Preserves line breaks — editorial (serif) and sans fonts

I want to do with you what spring does with the cherry trees. I want to see the full length of your body, the morning opening in your eyes.

— Pablo Neruda

In a world of algorithms, we still choose to wander through the fog of questions.

FullBleed

Edge-to-edge breakout with optional caption

Full bleed demonstration
A full-bleed image stretches beyond the content container to the viewport edges.

MetaGrid

Labeled metadata in 2/3/4-column layouts

UNESCO

Creative Direction

Motion Design

2025

Web

Astro

TypeScript

Tailwind

Shipped

StatCards

Key metrics with data-attribute pseudo-elements

ImageGrid

Equal-column layouts with responsive collapse

Grid 1 Grid 2 Grid 3 Grid 4 Grid 5 Grid 6

VideoEmbed

YouTube embed with URL parsing

ProjectCredits

Crédits

  • DirectionDamien Rayuela
  • ProductionStudio Example
  • Sound DesignAudio Collective
  • PhotographyJane Doe

Spacer — Size Scale

xs
sm
md
lg
xl
2xl

NextPrevProject