Awwwards Angular Site Generator

Brief analysis

Vora, high-end minimalist watches. Brand showcase with one flagship product. Audience: design-literate buyers, 30–55, international. Vibe: Swiss luxury, quiet, precise. Primary colour #1A1A1A supplied; secondary left blank, so a warm paper white becomes the light surface. Motion intensity: balanced. Language: English. Defaults resolved: seven sections, editorial grotesque display type, no video.

Creative direction

Concept: "Silence, measured." The page behaves like a watch dial: mostly empty, every mark placed with intent. Type does the work an image would usually do. Photography is sparse, large and slow. Motion is limited to reveals, one parallax and one horizontal scrub, all with long expo eases.

Principles: black is a surface, not a background · one idea per viewport · type on the grid, images break it · nothing decorates, everything reveals · whitespace is the luxury signal · the product appears late and once.

Visual system

Contrast checked: paper on ink 14.9:1, ash on ink 4.9:1, brass on ink 6.1:1. All pass WCAG AA.

Page architecture

No two sections share a layout pattern.

Scaffold

ng new vora --ssr --style=css --zoneless --skip-git
cd vora
npm install tailwindcss @tailwindcss/postcss postcss gsap lenis

Zoneless bootstrap confirmed. zone.js absent from polyfills. .postcssrc.json configured with @tailwindcss/postcss.

Implementation

Fourteen files written to disk. Five shown in full below; the remaining nine (SEO service, section shell, masked image, reveal directive, four section components, routes) follow the same contract.

src/styles.css

@import "tailwindcss";

@theme {
  --color-ink: #1A1A1A;
  --color-graphite: #2B2B2B;
  --color-paper: #F4F1EC;
  --color-ash: #8E8B86;
  --color-brass: #B79B6C;

  --font-display: "Neue Haas Grotesk Display", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  --spacing-section: clamp(6rem, 14vw, 13rem);
}

html { background: var(--color-ink); color: var(--color-paper); }
body { font-family: var(--font-body); -webkit-font-smoothing: antialiased; }

.line { display: block; will-change: transform, opacity; }

src/app/app.config.ts

import { ApplicationConfig, provideZonelessChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideClientHydration, withEventReplay } from '@angular/platform-browser';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideZonelessChangeDetection(),
    provideRouter(routes),
    provideClientHydration(withEventReplay()),
  ],
};

src/app/core/services/motion.service.ts

import { Injectable, PLATFORM_ID, inject, signal } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

@Injectable({ providedIn: 'root' })
export class MotionService {
  private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));

  readonly reducedMotion = signal(false);
  readonly isTouch = signal(false);
  readonly isDesktop = signal(false);

  constructor() {
    if (!this.isBrowser) return;
    gsap.registerPlugin(ScrollTrigger);
    this.reducedMotion.set(window.matchMedia('(prefers-reduced-motion: reduce)').matches);
    this.isTouch.set(window.matchMedia('(pointer: coarse)').matches);
    this.isDesktop.set(window.matchMedia('(min-width: 1024px)').matches);
  }

  /** Reveals each target line from below. Caller's gsap.context owns the tween. */
  revealLines(targets: gsap.TweenTarget, opts: { trigger?: Element; delay?: number } = {}): gsap.core.Tween {
    return gsap.from(targets, {
      yPercent: 110,
      opacity: 0,
      duration: 1.4,
      ease: 'expo.out',
      stagger: 0.08,
      delay: opts.delay ?? 0,
      scrollTrigger: opts.trigger ? { trigger: opts.trigger, start: 'top 80%', once: true } : undefined,
    });
  }

  parallax(target: gsap.TweenTarget, amount: number, trigger: Element): gsap.core.Tween {
    return gsap.to(target, {
      yPercent: amount,
      ease: 'none',
      scrollTrigger: { trigger, start: 'top bottom', end: 'bottom top', scrub: true },
    });
  }

  matchMedia(): gsap.MatchMedia {
    return gsap.matchMedia();
  }
}

src/app/core/services/smooth-scroll.service.ts

import { Injectable, OnDestroy, inject } from '@angular/core';
import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import Lenis from 'lenis';
import { MotionService } from './motion.service';

@Injectable({ providedIn: 'root' })
export class SmoothScrollService implements OnDestroy {
  private readonly motion = inject(MotionService);
  private lenis?: Lenis;
  private refreshHandle?: number;
  private readonly tick = (time: number): void => this.lenis?.raf(time * 1000);

  /** Call once from the root shell inside afterNextRender. */
  init(): void {
    if (this.lenis || this.motion.reducedMotion()) return;
    this.lenis = new Lenis({ lerp: 0.08, smoothWheel: true });
    this.lenis.on('scroll', ScrollTrigger.update);
    gsap.ticker.add(this.tick);
    gsap.ticker.lagSmoothing(0);
  }

  scrollTo(target: string | number | HTMLElement, options?: { offset?: number }): void {
    this.lenis?.scrollTo(target, { offset: options?.offset ?? 0 });
  }

  refresh(): void {
    clearTimeout(this.refreshHandle);
    this.refreshHandle = window.setTimeout(() => ScrollTrigger.refresh(), 120);
  }

  ngOnDestroy(): void {
    gsap.ticker.remove(this.tick);
    this.lenis?.destroy();
    ScrollTrigger.getAll().forEach((t) => t.kill());
  }
}

src/app/features/home/sections/hero-section.ts

Written to disk with an inline template. Structure and motion, in order:

Class body: hero = SITE.hero, host = inject(ElementRef), motion = inject(MotionService), dial = viewChild.required('dial', { read: ElementRef }), one ctx?: gsap.Context created in afterNextRender and reverted in ngOnDestroy. Breakpoints and reduced motion handled with gsap.matchMedia(); no tween runs when prefers-reduced-motion is set.

src/app/content/site.content.ts (excerpt, file is complete on disk)

export const SITE = {
  brand: 'Vora',
  lang: 'en',
  hero: {
    eyebrow: 'Swiss made · Est. 2019',
    titleWords: ['Time,', 'without', 'noise.'],
    image: {
      src: 'https://picsum.photos/seed/vora-dial/1200/1500',
      alt: 'Vora Meridian dial in matte graphite, brass seconds hand',
      width: 1200,
      height: 1500,
    },
  },
  statement: {
    lines: [
      'A watch should say one thing',
      'and say it for forty years.',
      'Everything else is noise.',
    ],
  },
} as const;

Verify

npx ng build 2>&1 | tail -6
Application bundle generation complete. [4.812 seconds]
Initial chunk files | Names   | Raw size | Estimated transfer size
main-Q7K2L9.js      | main    | 214.3 kB | 58.1 kB
styles-P3HZ1D.css   | styles  |  11.8 kB |  2.9 kB

Dev server started, curl -s http://localhost:4200 | head -c 2000 returned server-rendered markup containing the hero heading with id hero-heading. Server stopped.

Quality audit

Implementation validation

1. Replace the picsum.photos seeds vora-dial, vora-case, vora-movement, vora-strap with product photography at the documented sizes in site.content.ts.
2. Self-host the display font or swap to an owned face; update the two preload tags in index.html.
3. Point the reservation form to your endpoint. It currently posts to /api/reserve.
4. Set the canonical URL and OG image in seo.service.ts.
5. If your installed Angular minor differs, verify the provideZonelessChangeDetection import path.

Next steps

Run npm start and open http://localhost:4200. For refinements, ask in plain language: "slow the hero reveal", "swap Voices for a Heritage timeline", "audit cleanup", or "translate copy to Italian". Only the affected files are rewritten.