---
id: "aw-el-557f4f87-4f47-4aeb-85d8-d74511e23d60"
source: https://www.awwwards.com/inspiration/path-scroll-with-rive-animations-mindmarket
author: "Louis Paquet (louispaquet)"
media: "video, 1600x1200, 18.8s"
model: claude-opus-5-5
generated: 2026-10-31
---
# Green Path Scroll with Illustrated Characters

## Summary
A scrolling storytelling page for a market research agency where a fat, curving green path winds down a cream canvas and flat, colorful characters tumble, run and float along it, each scene paired with a white content card. The scroll ends in a grassy green call-to-action with flowers. Worth studying for how one continuous illustrated path ties sections together and how character animation keeps every scroll step lively.

## Style
- Theme: light (cream and bright green)
- Mood: joyful, energetic, friendly, colorful, playful
- Tags: scroll-storytelling, illustration, path-animation, rive, flat-characters, content-cards, colorful
- Category: Motion, Illustration

## Palette
| Role | Hex |
|---|---|
| Frame green | #8ED462 |
| Cream canvas | #F2ECDF |
| Path green | #81CB57 |
| Card white | #FEFEFD |
| Marigold | #EFA62D |
| Sage cream | #CED0A2 |
| Forest | #446536 |
| Bright blue | #2C95F7 |

## Typography
- Section headings: neo-grotesk sans, regular (400), sentence case, tight tracking (-0.02em), near black, about 2.5% of frame height in cards and about 7% in the final CTA. Closest free font: Inter Tight 400 or Geist 400.
- Body in cards: small regular sans (Inter 400), about 0.9% of height, 1.4 line height.
- Buttons: tiny medium sans (Inter 500) inside colored pills with a white circular arrow.
- Nav: small regular sans links with chevrons; logo is a small mark plus name (shown as a placeholder wordmark).

## Layout
- 4:3 frame (1600x1200) with the site as a 16:9 window (radius about 16px) on a flat green #8ED462 ground.
- Floating nav: a white bar inset 4% from the top with radius 8px; links centred, a round green menu button and a white Get-a-quote pill with a round avatar on the right.
- The green path is a thick ribbon (about 30% of the window width) curving left and right as you scroll, with soft-edged shadows of white cloud puffs.
- Content cards: white, square corners or 4px radius, about 35% of the window width, 24px padding, placed opposite the path's bend.
- Final CTA: full-bleed green with a strip of illustrated flowers and leaves at the top and a huge centred headline.

## Elements
- Flat vector characters with chunky limbs, bold colors (red, yellow, blue, lilac) and simple faces: a pile of people tumbling, a runner, a person on a hoverboard, a figure in a lab coat holding a sneaker.
- Props: a yellow clock, a spotted egg, a megaphone, blue speech shapes, white cloud puffs, squiggles.
- Pill buttons: yellow, blue and lilac with a white circular arrow icon at the right.
- Nav bar with logo, five links (two with dropdown chevrons), menu button and quote pill.

## Motion
- Continuous scroll: the path is pinned to scroll progress and its curve slides upward, while characters along it play looping Rive animations (wobbles, kicks, waves at about 1 to 2s per loop).
- 0.8 to 4.1s: the first tumbling group exits upward and the first card slides in from the left (about 500ms, ease-out).
- 7.5s: a second card enters from the right as the path swings left.
- 10.9 to 14.3s: a running figure crosses the path; the next card rises in.
- 17.7s: the CTA section takes over; flowers sway gently and the headline fades up.

## Rebuild it
1. Draw the path as one tall SVG `path` with a thick stroke (`stroke-width` about 30vw, `stroke-linecap: round`) inside a section several viewports tall.
2. Use `useScroll` and `useTransform` to move the SVG and to animate `pathLength` from 0 to 1 so the path draws as you scroll.
3. Characters: Rive files rendered with `@rive-app/react-canvas`, positioned along the path at fixed progress points; trigger state machine inputs when each enters view.
4. Cards: `bg-white p-6 max-w-[420px]` with `whileInView={{ opacity: 1, x: 0 }}` from `x: -40` or `x: 40`, 500ms ease-out, `viewport={{ once: true, amount: 0.4 }}`.
5. Buttons: `rounded-full pl-3 pr-1 py-1 text-xs font-medium` with a `size-5 rounded-full bg-white` arrow icon.
6. Nav: `fixed top-4 inset-x-6 bg-white rounded-lg h-10 flex items-center` plus a separate quote pill.

## Generation prompt
A joyful illustrated scrolling website: a thick bright green path curves down a warm cream page, flat colorful cartoon characters with chunky limbs tumble, run and float along it among white cloud puffs, a yellow clock and squiggles, while clean white text cards with small colored pill buttons appear beside each bend; ends in a grassy green section with illustrated flowers and a huge friendly headline; energetic, playful, no real brand names.