Spot73 Studios Talk to us
Home Podcasts Audiovisual Studio Digital Blog Contact

Colophon

How this site
works.

No JavaScript framework, no animation library, no plugins. Every effect you see here is native web platform — and it is exactly what we build for our clients.

What you can see

Effects that normally need JavaScript

  • View Transitions between pages

    The transition when you change pages is pure CSS (@view-transition), not a SPA. The site stays static HTML: every page indexes and loads on its own.

  • Speculation Rules

    The browser prerenders the next page before you click it. By the time you do, it is already there — 0 ms navigation with no JavaScript router.

  • Scroll-driven animations

    The progress bar, the reveals and the stacking cards all run on animation-timeline. Zero libraries, zero scroll listeners, zero main-thread work.

  • 100% CSS carousel

    The buttons and dots on the case carousel are native pseudo-elements (::scroll-button, ::scroll-marker): accessible and keyboard-navigable out of the box.

  • Continuous corners (squircle)

    corner-shape: squircle gives cards the Apple-style curve. Browsers without support simply get a regular border-radius.

  • Animated menu entrance

    @starting-style with transition-behavior: allow-discrete animates the language and theme menu opening without a single line of JavaScript.

Your browser supports this technique. Your browser is on the fallback — the site works the same, just simpler.

What you can't see

Decisions that don't show, but do feel

  • Astro, static

    The whole site compiles to HTML. There is no server to answer and no database to query: the visitor gets the finished file straight from the edge.

  • Minimal JavaScript

    Only two small scripts: language/theme and the menu. No framework, no hydration, no hundreds of kilobytes of bundle.

  • Cloudflare Pages

    Static hosting with unlimited bandwidth, free SSL and automatic deploys on every push. Monthly infrastructure cost: $0.

  • Three languages, one page

    EN/ES/PT with no duplicate URLs and no reload: the active language dictionary travels with the page and applies instantly.

  • Accessibility and motion

    AA contrast, visible focus, keyboard navigation and full respect for prefers-reduced-motion: ask for less motion, get less motion.

  • Performance as a requirement

    Sized images, system fonts, no CLS. Lighthouse 100 is not the goal: it is the starting line.

Want a site like this?

The same thing that makes this site fast makes yours fast.

Start a conversation