Telha Clarke

An architecture and interior studio site that is almost entirely white space and photography. One move carries the opening: a full-bleed photograph under a small header, which the page then slides over as you scroll. After that the page is quiet: grotesk statements, bracketed project titles, and a floating field of thumbnails.

Rebuild: design-inspiration-rebuilds/architecture/telha-clarke (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 { --gut: 18px; --stage: clamp(60px, 12.4vw, 200px); }

• Type: a neo-grotesk at weight 400-500 (original: Europa Grotesk; substitute: Hanken Grotesk), tight tracking (-.048em on statements, -.04em on titles). The logo stays small in the header; the photography carries the opening, not a display wordmark.
• Scale: statements clamp(28px, 4.1vw, 60px), project titles up to 96px, UI text 12-14px.
• Shape: no radii, no shadows, no colour. Images are hard-edged rectangles on white.

Motion Spec

Key excerpts

Full-bleed hero parallax: src/hero.js

const st = { trigger: '.hero', start: 'top top', end: 'bottom top', scrub: true };
gsap.timeline({ scrollTrigger: st })
  .to('.hero-img img', { yPercent: 18, scale: 1.12, ease: 'none' }, 0)
  .to(['.hint', '.tagline'], { opacity: 0, duration: 0.3, ease: 'none' }, 0);

Smooth scroll on the GSAP ticker: src/scroll.js

lenis = new Lenis({ lerp: 0.1, smoothWheel: true, syncTouch: true, touchMultiplier: 2, autoRaf: false });
lenis.on('scroll', ScrollTrigger.update);
gsap.ticker.add((t) => lenis.raf(t * 1000));
gsap.ticker.lagSmoothing(0);

Statement line reveal: src/reveals.js

SplitText.create(el, { type: 'lines', mask: 'lines', autoSplit: true, onSplit: (self) =>
  gsap.from(self.lines, { yPercent: 105, duration: 1.1, ease: 'power3.out', stagger: 0.1,
    scrollTrigger: { trigger: el, start: 'top 85%', once: true } }) });

Bracket spread via a CSS variable: src/works.js

gsap.fromTo(title, { '--spread': 0 }, { '--spread': 1, ease: 'none',
  scrollTrigger: { trigger: title, start: 'top 95%', end: 'top 45%', scrub: 0.5 } });
// css: .work-title span { margin: 0 calc(1vw + var(--spread) * 5vw); }

Depth-based image field: src/field.js

imgs.forEach((im) => {
  const d = +im.dataset.depth;
  gsap.fromTo(im, { yPercent: 60 * d }, { yPercent: -60 * d, ease: 'none',
    scrollTrigger: { trigger: '.allwork', start: 'top bottom', end: 'bottom top', scrub: true } });
});

prefers-reduced-motion: smooth scroll, pinning, reveals and parallax are disabled; content is visible.

Why Award-Worthy

1. One opening gesture. A full-bleed photo that settles in after the loader, then drifts and scales back as the next section slides over it, sets the whole tone in one scroll.
2. Restraint. Black, white and photography only; the buildings supply all the colour.
3. Typographic restraint. One quiet grotesk, tightly tracked, at very different sizes.
4. Brackets as a motif. Project titles breathe open on scroll, a cheap detail that feels designed.
5. Layered depth without WebGL. The All Work field uses plain transforms and opacity.

Anti-patterns it avoids: no carousels, no hover-card clutter, no decorative colour, no heavy shaders; images carry the content.

Credits

• Original: telhaclarke.com.au by Greg Lallé. Design and content are the intellectual property of their creators.
• Recognition: Awwwards Site of the Day, Developer Award.
• This study is an independent clean-room analysis. The rebuild uses a fictional studio, AI-generated images and open-source fonts; it contains no original code, assets or copy.