One brand, a world of its own: the TSAM Flagship Showcase
A cinematic scroll website: a canyon landscape, a metal portal that grows to fill the screen, a turquoise coast behind it, and at the end that same world pulls back into a real browser and phone mock-up. Built without a framework, without WebGL and without external scripts, so it runs cleanly on a phone.
Starting point
Most business websites look like the template they came from. I wanted a piece that proves, within seconds, that a website can feel like a place rather than a page, and that still stays usable: readable text, a clear contact path, no plugin sprawl.
The task
Build a demo that works as portfolio piece, social-media material and proof of craft at the same time. Five scenes, one continuous scroll, a real call to action at the end. It had to run on iPhone and Android, not only on a large monitor.
How it was built
- Concept first: scene sequence, camera logic, copy and image briefs were defined before any code, so every effect had a job in the story.
- Four iterations in one day: a WebGL portal frame with Three.js looked flat in a real browser and needed three external libraries. It was replaced by a rebuild with zero dependencies.
- Tested on real phones: the first oval portal distorted into a leaf shape on tall mobile screens. The fix keeps the portal's aspect ratio constant while it grows.
- Safari-safe hole: the see-through portal used a clip-path fill rule that WebKit does not handle reliably. It was rebuilt as a counter-wound ring with the standard fill rule.
- Weight cut: the coast video ships in 720p and 1080p depending on screen and connection, the display font is self-hosted, images are WebP with JPEG fallback.
Technical decisions
- No framework, no build step: plain HTML, CSS and JavaScript. The page also opens by double-clicking the file.
- Own scroll driver: a small requestAnimationFrame loop maps scroll position to scene progress. No GSAP, no ScrollTrigger.
- Portal frame in CSS: mitred metal bars, extruded sides, a mint inner edge, floor shadow and light spill, all CSS. No 3D library.
- Anchored in image coordinates: the portal sits on the rock edge at every aspect ratio because its position is defined relative to the picture, not the viewport.
- Fallbacks: without JavaScript or with reduced motion the page shows a static version with both images, the text and the contact buttons.
- Measured, not guessed: scene depth and CTA clicks are counted anonymously with GoatCounter (no cookies), so I can see how far visitors actually scroll.
Result
The showcase is live at t-s-a-m.de/showcase and is the first reference I send. Lab values (Lighthouse, mobile emulation, throttled 4G) after the optimisation pass:
- Total page weight on mobile: 6.9 MB before, 2.0 MB after.
- First Contentful Paint: 2.3 s before, 0.8 s after. Speed Index: 2.3 s before, 0.9 s after.
- Largest Contentful Paint stays around 5 s in the lab on purpose: the stage is only revealed once both full-screen images are decoded, so the first frame is never half-loaded.
- Accessibility score: 100 (local Lighthouse measurement, September 2026).
No client numbers, no traffic claims: this is a concept project, not a client order. Copy and imagery are draft material.
What this means for your project
A custom image world instead of stock photos, your own design instead of a template, an interactive implementation that runs on a phone. That is service A on the homepage: build or improve a website. Scope and cost are clarified in a short conversation before anything starts.
My role and stack
Concept, image world, implementation, testing and hosting: Ron Portner. Landscape and coast images and the short coast video are AI-generated (Higgsfield) from my briefs. Everything else is hand-set HTML, CSS and JavaScript.
Want a presence that feels like this, with your own imagery? Free initial consultation, around 15 minutes, no obligation.
Discuss a project with Ron