---
id: "aw-el-46868d56-cfd6-4676-a947-21af6e4b3ae3"
source: https://www.awwwards.com/inspiration/microinteractions-son-daven
author: "The First The Last (thefirstthelast)"
media: "video, 1600x1200, 12.4s"
model: claude-opus-5-5
generated: 2026-10-31
---
# Season Switcher with Striped Line Images

## Summary
A dark brown content panel for a mountain resort with a small winter and summer switcher at the top: toggling it morphs a skier into a craggy rock face, both drawn only with thin vertical tan stripes, while the serif caption reshuffles letter by letter into the new text. Worth studying for the striped bar-halftone imagery and the jittery, settling type transition that makes a simple toggle feel crafted.

## Style
- Theme: dark (espresso panel on a tan striped backdrop)
- Mood: earthy, crafted, adventurous, refined
- Tags: toggle-switch, microinteraction, line-halftone, image-morph, serif-caps, text-scramble, seasonal
- Category: Motion, Components

## Palette
| Role | Hex |
|---|---|
| Panel background | #2B2723 |
| Tan stripes and type | #A69272 |
| Deep brown | #32291E |
| Sand | #9C8869 |
| Khaki | #8C7C62 |
| Stone grey | #978E7E |
| Umber | #473E33 |
| Taupe shadow | #655B4F |

## Typography
- Big figure ("35"): light classical serif with lining numerals, about 12 percent of panel height, with a small "KM" in caps beside it. Cormorant Garamond (400).
- Caption: serif, regular, uppercase, slight tracking (about 0.03em), tight leading, about 3 percent of panel height, tan. Marcellus or Cormorant (500).
- Button and tiny labels: very small uppercase sans with wide tracking on a tan pill. Inter (500).

## Layout
- 4:3 frame (1600x1200) of a tan backdrop covered in fine vertical lines; the dark panel is a 16:9 rectangle about 90 percent of the width with square corners and no shadow.
- Switcher: centred at the top, two 28px circles (snowflake and sun icons) joined by a dotted arc, with a tiny label above.
- Winter state: line-image of a skier on the left third, number plus caption and button in the right half.
- Summer state: caption and button in the left half, a tall rock formation rising from the bottom-right corner with a stripe "ground" along the bottom edge.
- A tiny placeholder logo sits in the bottom-left corner.

## Elements
- Line images: built from 2 to 3px wide vertical tan bars with 2px gaps; bar segments switch on and off to draw the silhouette and shading.
- Switcher: outlined circles; the active one is filled tan with a dark icon; a small dot travels along the dotted arc between them.
- Caption block: uppercase serif text, three to five lines.
- Pill button: tan filled, about 110 x 24px, tiny dark uppercase label.
- Backdrop: fine vertical striping in shades of tan, echoing the image technique.

## Motion
- 0.5s: winter state; the switcher dot sits by the sun.
- About 1 to 2.7s: the toggle fires; the skier stripes collapse downward while rock stripes rise from the bottom like an equaliser (about 800ms, staggered left to right by 4 to 6ms per bar).
- Caption: old letters fade while new words arrive at uneven sizes and baselines, then snap into a tidy line (about 600ms, ease-out, 15ms per letter).
- 5.0s: summer state settles.
- 7.2s: toggled back; the rock dissolves into scattered stripe fragments as the skier rebuilds, the text again jitters into place; 9.4 to 11.7s winter state holds, with the travelling dot easing across the arc in about 500ms.

## Rebuild it
1. Panel: `aspect-video w-[90vw] bg-[#2B2723] text-[#A69272] relative overflow-hidden`; backdrop `bg-[#A69272]` with `repeating-linear-gradient(90deg, #9C8869 0 2px, transparent 2px 5px)`.
2. Line images: sample a greyscale source image into columns (for example 300 bars), store for each bar a list of on segments, and render them as SVG `rect`s or on a canvas.
3. Morph: tween each bar's segments from the winter layout to the summer layout with Motion's `animate`, using `delay: i * 0.005` and `ease: [0.65, 0, 0.35, 1]` over 800ms.
4. Switcher: two `button` circles linked by an SVG dotted arc (`stroke-dasharray: 1 4`); move the dot with `offset-path` or a `layoutId` element (spring, stiffness 300).
5. Caption: split into letter spans; on change, give each new letter random initial `y` (-6 to 6px), `scale` (0.8 to 1.2) and `opacity: 0`, and animate to identity with a 15ms stagger.
6. Respect reduced motion by crossfading the two states instead.

## Generation prompt
An elegant dark espresso-brown web panel for a mountain resort with a small winter and summer toggle at the top: a skier and then a towering rock formation drawn entirely from thin vertical tan stripes like a bar-chart halftone, morphing between each other with stripes rising and falling like an equaliser, beside uppercase classical serif text that shuffles letters into place, a tan pill button, fine striped tan backdrop, crafted and earthy, no logos.