Son Daven

A resort-hotel and investment site whose identity is one rendering idea: a vertical-bar halftone. Photos, the hero logotype and a pine-tree silhouette are all quantised to a grid and redrawn as vertical bars (dark pixels give wide bars, bright pixels thin ones) by a single small WebGL fragment shader. Around it sits a quiet two-colour system, sand and warm near-black, with a wide classical display serif against an extended geometric sans, everything uppercase.

Rebuild: design-inspiration-rebuilds/hotel-restaurant/son-daven (fictional content, generated images, open-source fonts; installed with the optional design-inspiration-rebuilds skill). Run it with npm install && npm run dev.

Design Tokens

:root {
  --sand: #a89474; --ink: #2c2824;
  --dur-s: .4s; --dur-m: .8s; --dur-l: 1.2s;     /* the only three durations */
  --px: calc(1rem / 14.4);                        /* 1 design px at a 1440 layout */
  --ease-inout: cubic-bezier(.76, 0, .24, 1);
  --ease-out: cubic-bezier(.25, 1, .5, 1);
}
html { font-size: 1vw; }                          /* 1rem = 1% of viewport width */
@media (max-width: 991px) { :root { --px: calc(1rem / 3.84); } }   /* design width 384 */

• Sizing model: every length is calc(N * var(--px)), with N authored at 1440px. The whole composition scales linearly with the viewport; no clamp(), no fluid-type formula.
• Type: display serif (original: a wide Roman face; substitute: Cinzel) with -0.064em tracking, UI and body in an extended sans (substitute: Syncopate) with +0.08em tracking. One weight (400) throughout. Scale 144 / 96 / 72 / 56 / 40 / 24 for headings.
• Themes: semantic variables (--bg, --fg, --line) swap by a theme class per section, and the fixed header and sound toggle follow whichever theme is under them.
• Shape: hairlines (1px), circular buttons, pill CTAs, no shadows. A noise PNG overlay adds grain.

Motion Spec

Key excerpts

Vertical-bar halftone fragment shader: src/effects/halftone.js

vec2 g = local * u_grid;
vec2 cell = floor(g);
vec2 inCell = fract(g);
vec2 c = (cell + .5) / u_grid;                 // sample the texture at the cell centre
// ...
vec3 rgb = pow(s.rgb, vec3(u_gamma));
rgb = clamp((rgb * 255. - u_black) / max(u_white - u_black, 1.), 0., 1.);
float br = dot(rgb, vec3(.333)) * s.a;
vec4 o = u_bg;
if (br <= u_thr / 255.) {
  float w = mix(u_maxW, u_minW, br);           // dark = wide bar, bright = thin
  if (abs(inCell.x - .5) * 2. <= w) o = u_fill;
}
gl_FragColor = o;

Brightness only: sources need strong luminance contrast. Animating blackPoint, whitePoint, threshold or the bounds is plain GSAP on a config object; the render loop redraws on change.

Bloom into a solid field: src/effects/halftone.js

// BLOOM TRICK: tween cfg.minW from -0.02 to 1.02 and cfg.threshold to 256 and every
// cell becomes a full fill block, i.e. the scene "blooms" into a solid colour field.

The zoom-through intro uses this to turn a tree silhouette into the next section's sand background.

1rem = 1vw sizing: src/styles/tokens.css

html { font-size: 1vw; }
--px: calc(1rem / 14.4);                 /* desktop: N authored at 1440 is N px at 1440 */
/* <=991px: --px: calc(1rem / 3.84) */
.h1 { font-size: calc(var(--n-h1) * var(--px)); }

A layout drawn once scales linearly with no breakpoints in the type.

Scattered word reveal: src/effects/reveal.js

const WORD_FROM = [-150, 75, -75, 150];
SplitText.create(el, { type: 'words', autoSplit: true, onSplit(self) {
  return gsap.from(self.words, {
    yPercent: (n) => WORD_FROM[(n + i) % 4],
    scale: 0, opacity: 0, duration: 1.2, ease: 'Out',
    delay: 0.2 + i * 0.05,
    stagger: { each: 0.025, from: 'random' },
    scrollTrigger: st(el),
  });
}});

The random order plus scale pop reads as a shimmer, not a slide.

Grid wipe transition: src/effects/transition-grid.js

const stagger = { each: 0.03, from: 'end', grid: [20, 12] };
export function cover() {
  gsap.set(cells, { transformOrigin: 'left center' });
  return gsap.fromTo(cells, { scaleX: 0 }, { scaleX: 1, duration: 0.4, ease: 'InOut', stagger }).then();
}
export function reveal() {
  gsap.set(cells, { transformOrigin: 'right center' });
  return gsap.to(cells, { scaleX: 0, duration: 0.4, ease: 'InOut', stagger }).then(/* ... */);
}

Cells take the current theme's background, so the wipe always matches the page it covers.

prefers-reduced-motion: smooth scroll, pinning, reveals and the preloader are skipped; content is visible.

Why Award-Worthy

1. One rendering idea carries the brand. The bar halftone is the logotype, the hero overlay, the tree zoom and the season switcher. Nothing else competes with it.
2. Image treatment doubles as transition. Tweening shader levels dissolves photos in and blooms a silhouette into the next section's background, so scenes change without cuts.
3. Two colours, no clutter. Sand and near-black with hairlines and circles read as luxury without gradients or shadows.
4. Authored once, scales everywhere. The 1rem = 1vw model keeps tight uppercase lockups intact at every width.
5. Consistent motion vocabulary. Three durations and two curves run the whole site; each reveal type has a distinct shape.

Anti-patterns it avoids: no generic fade-up reveals, no stock carousel (clip-wipe and drag list instead), no drop shadows, the WebGL layers only draw while in view and never block content.

Credits

• Original: sondaven.com by The First The Last. Design and content are the intellectual property of their creators.
• Recognition: Awwwards Site of the Month (Jun 2026), Site of the Day, Developer Award.
• This study is an independent clean-room analysis. The rebuild uses a fictional hotel project, AI-generated images and open-source fonts; it contains no original code, assets or copy.