A drafting-table SaaS homepage for architecture software — warm paper, hairline rules and corner ticks, a loader with a coordinate ruler, ink-bleed image reveals and pixel-wipe buttons, closing on a wordmark that draws itself in outline and inks in under the pointer. A design-and-behaviour study of a Webflow original, rebuilt as a clean Vite project.
Architecture
- Nested standalone Vite build composed from HTML partials by a small include plugin
- One behaviour module per section, run in order after the loader
- SVG feTurbulence + feDisplacementMap ink masks and a CSS mask-position sprite wipe on buttons
- GSAP ScrollTrigger, SplitText and DrawSVG over a Lenis-wrapped scroller; Swiper on mobile
Stack / Framework / Tools
Implementation - how can it be used
- SaaS and AI tools for architects, engineers and construction
- Studio, practice and B2B product sites with a technical-drawing voice
- Landing pages that want precise, restrained motion over spectacle
A monument to listening — an independent historical journal printed like a risograph in two inks: a live WebGL temple, a working print press whose pulls hang on a drying line, a seven-step climb through music history, a pinned listening portico and a dust tablet that carves your name. Each build rolls its own paper, drums, typefaces, temple and section chart.
Architecture
- Nested standalone Vite + React app, driven by a rolled design chart
- Three.js temple and OGL risograph gallery share one two-ink print shader
- Visual press with grain, registration and density controls; prints export as PNG
- GSAP ScrollTrigger + Lenis choreography, self-hosted fonts, WebGL and reduced-motion fallbacks
Stack / Framework / Tools
Implementation - how can it be used
- Historical journals, record labels and listening bars
- Print studios, publishers and editorial magazines
- Cultural institutions and archives with a classical, monumental voice
A nocturnal design language for products that work while their people sleep — a dithered pink WebGL planet and starfield, a ship’s clock, scroll-driven instruments and a landfall where the night resolves into Delft ink on paper. Each build rolls its own palette, typography, course and composition.
Architecture
- SvelteKit 2 + Svelte 5, prerendered as a static site
- One fixed WebGL2 sky, rendered at low resolution with hard pixel dithering
- GSAP + Lenis choreography ties the sky, clock and theme to scroll position
- Self-hosted fonts, native touch scrolling and reduced-motion fallbacks
Stack / Framework / Tools
Implementation - how can it be used
- Background agents, CI pipelines, monitoring and backups
- Logistics and services that operate through the night
- Product launches with a cinematic, instrument-led narrative
A coin-op archive: an arcade museum site that stays locked until you insert a coin, then boots into a cabinet floor of text-mode attract screens, a playable ASCII Breakout that files your initials into a hall of fame, and an ASCII flame furnace.
Architecture
- Nested standalone Vite + React app
- Three.js shader renders the hero as a live ASCII wave
- Canvas text-mode cabinets and a playable ASCII Breakout
- Scramble-decode text reveals with GSAP + Lenis scroll
- WebAudio synth for cabinet sounds, no audio assets
Stack / Framework / Tools
Implementation - how can it be used
- Game studios, arcades and bars that want a playful front door
- Retro, museum or archive sites where browsing feels like playing
- Launch pages built around a single interactive gimmick
A studio landing page for hand-cast optical glass — a live WebGL raymarched glass object that morphs torus → sphere → cross → glint as you scroll, bending and splitting the type behind it into colour, with a hands-on optical bench, a pinned horizontal gallery, and a scroll-drawn lens diagram.
Architecture
- Single standalone HTML file — styles, glass renderer and choreography inlined; libraries from CDN
- Custom WebGL raymarcher: SDF shape morphing, chromatic dispersion, frost, thin-film iridescence and a spectral caustic over 2D canvas 'plates'
- GSAP ScrollTrigger + Lenis: pinned hero scrub, horizontal gallery, SplitText reveals, scroll-drawn SVG optics diagram
- Graceful fallbacks — flat canvas without WebGL, snap-to-state without GSAP, and a full prefers-reduced-motion path
Stack / Framework / Tools
Implementation - how can it be used
- Product or studio sites for glass, lighting, jewellery, optics or hardware
- Interactive product configurators and live 'bench' demos
- Premium launch pages where one hero object carries the story
A perception-engineering studio landing page — an achromatic, single-file site built around four live Canvas 2D optical illusions you can press-and-hold to expose, kinetic variable-font typography, a moiré hero that tracks the cursor, and pinned horizontal scrollytelling.
Architecture
- Single standalone HTML file, zero build step, served as a static asset
- Four live Canvas 2D illusions (Fraser spiral, café wall, peripheral drift, Necker cube) with press-and-hold 'reveal the trick' interactions
- animejs motion layer: loader, kinetic variable-font hero, cursor-tracked moiré, scroll choreography, and count-ups
- Pinned horizontal 'Method' track + IntersectionObserver reveals, with a full prefers-reduced-motion / no-JS fallback
Stack / Framework / Tools
Implementation - how can it be used
- Studio or agency landing pages with a strong conceptual hook
- Interactive editorial, exhibition, or campaign microsites
- Portfolio showcases demonstrating canvas + motion craft
Note: This was the initial website idea that the skill was trained on, made by the author.
A kinetic music-festival landing page — parallax hero layers, a scrubbable headline that reveals the real lineup. Punchy animations to attract the user's attention, colorful but smooth effects.
Architecture
- Single self-contained standalone HTML document — no build step, no dependencies
- Section-per-viewport layout paired with a fixed custom scrollbar rail
Stack / Framework / Tools
Implementation - how can it be used
- Music portfolios or DJ personal websites
- Marketing pages for tickets or festivals
- Anything that correlates to 'colorful'
Note: This was the initial website idea that the skill was trained on, made by the author.
A high-end, dark elegant marketing website framework — cinematic scroll motion, scroll-growing generative canvas motif, pinned scrollytelling, multi-step reservation wizard (EmailJS), bilingual i18n, and a Firebase CMS admin panel.
Architecture
- Multi-page vanilla HTML/CSS/JS architecture with zero build-tool overhead
- Generative canvas background that dynamically grows with scroll
- Cinematic motion layer (Lenis smooth scroll, GSAP kinetic type, IntersectionObserver reveals)
- Firebase (Firestore + Auth) backend with admin CMS panel and EmailJS booking wizard
Stack / Framework / Tools
Implementation - how can it be used
- Restaurants, cafes, bakeries, and lounges
- Boutique hotels, salons, and design studios
- High-end brand marketing sites with reservation wizards & CMS
Note: This was the initial website idea that the skill was trained on, made by the author.
A full multi-page Astro site, buttery smooth transitions and minimalistic design optimized for Bakeries/Pastries — shop, club, and story pages sharing a persistent sidebar rail, light/dark theming, and animated reveals.
Architecture
- Nested standalone Astro app
- Multi-page routing (shop, club, about, privacy, 404) on a shared layout
- Component-driven sections with a sidebar persisted across routes
Stack / Framework / Tools
Implementation - how can it be used
- Coffee shops
- Bakeries
- Personal portfolios of UI/UX designers
Note: This was the initial website idea that the skill was trained on, made by the author.
A dark, data-driven fintech portfolio built like a trading terminal — a fixed HUD chrome layer with live market tickers and cursor telemetry, a ring of floating 3D token discs, oversized kinetic typography, and an all-over film-grain finish.
Architecture
- Single-page site wrapped in a persistent HUD frame — corner brackets, live ticker rail, and real-time cursor / scroll telemetry readouts
- Ring of floating 3D token discs orbiting the hero, driven by pointer parallax and scroll
- Film-grain / sensor-noise overlay with monospace data labels for a terminal aesthetic
- Kinetic oversized wordmark and scroll-reveal typography
Stack / Framework / Tools
Implementation - how can it be used
- Fintech, trading, and crypto product landing pages
- Data-heavy dashboards and design-system showcases
- Portfolios wanting a terminal / HUD, capital-and-control aesthetic
Note: This was the initial website idea that the skill was trained on, made by the author.
A boutique studio landing page style built on restraint and editorial typography, with persistent light/dark theming and a WebGL noise gradient that quietly drifts toward the cursor.
Architecture
- Single self-contained HTML document — no build step, no dependencies
- Simple noise shader to give the page motion but not complexity
- Optimized SEO
Stack / Framework / Tools
Implementation - how can it be used
- Boutique Studios
- Simple portfolios
- Hair Salons
- Any website that presents a show/boutique is compatible
Note: This was the initial website idea that the skill was trained on, made by the author.
End of the library — for now
The librarystays open.
Unique and standalone frontend visual systems that will shape your website. Contributions are always welcome, feel free to open an issue or submit a PR.