Hermes-built • SVG + GSAP demo • self-hosted on your VPS

GPT Bloom

I switched to a flat-logo-first approach because the real mark is a designed 2D symbol, not something that naturally falls out of stacked circles. This version uses six repeated ribbon petals in a cleaner SVG composition, then lets you tilt the whole mark with your pointer.

What you're seeing: a flatter, more logo-first interpretation built from six repeated ribbon petals, with gentle tilt and shadow response so the symbol stays readable instead of turning into a noisy 3D object.
Format
Single page
Renderer
SVG + GSAP
Hosting
Caddy
Path
/srv/pages/demo
Interaction

Move the pointer to tilt the flat mark. The symbol stays readable and mostly still, then responds as one piece when you interact.

Flat first, then motion — not circles pretending to be the logo.
Design decisions

Why I chose this look

You were right to call out the circles. The real logo is hard to reconstruct from primitive ring geometry because it is really a tuned 2D symbol with a specific ribbon silhouette and weave. So this revision starts from a flat graphic idea first, then adds motion afterward. That keeps the page sleek while making the hero read more like a designed mark.

soft motion pointer reactive self-hostable low-maintenance

Readable first

The page needed to work as a real website, not just a canvas experiment, so the explanatory text and hosting notes are part of the composition rather than hidden below a toy animation.

Fun without chaos

The motion now comes from GSAP easing instead of a hand-rolled frame loop. It feels more deliberate on hover, while the resting state stays quiet enough for a public URL.

Warm visual system

I used warm paper tones, clay highlights, and soft olive accents so the page feels crafted rather than cyberpunk. That fits your self-hosted homelab vibe better than a neon dashboard aesthetic.

Local dependency only

GSAP is served from the same site directory, so the page does not rely on a CDN at runtime. That keeps the motion portable and easy to preserve on your VPS.

How it was built

Under the hood

The hero no longer tries to fake the logo out of torus loops. Instead, it uses a six-petal SVG composition with consistent ribbon thickness, controlled overlaps, and a single shared transform layer. The interaction is just tilt, parallax, and shadow response.

The key trick is to separate symbol design from motion design: first make a flat mark that reads correctly, then animate the entire mark lightly instead of animating every piece independently.

That way it still feels responsive, but it reads more clearly as an intentional symbol. And because it is just HTML, inline SVG, local GSAP, CSS, and a little JavaScript, it stays easy to keep tweaking without a build chain.

// Core interaction idea const rx = pointerY * -8; const ry = pointerX * 10; gsap.to(mark, { rotateX: rx, rotateY: ry, rotateZ: pointerX * 2.5, duration: 0.45, ease: "power3.out" }); gsap.to(shadow, { x: pointerX * 10, y: pointerY * 8, scale: 1 + energy * 0.02, duration: 0.45 });

I also kept the camera and particle count modest so the page should perform comfortably on ordinary devices while still looking polished on a desktop screen.

Why this hosting setup works

Built for your VPS instead of an expiring agent host

This page is the durable version of the idea you mentioned earlier. Rather than publishing to a temporary agent-hosted site, the files live on your own VPS and are served by your existing Caddy stack under demo.ourhomelab.site.

Static files

The site content lives in /srv/pages/demo, which fits the static site pattern you're already using for other pages on this server.

Caddy routing

A dedicated vhost block points the hostname at that directory and serves the page with normal file_server behavior.

So yes — this is absolutely doable here, and it is a better long-lived fit than a one-day showcase platform when you want a real URL you can keep around.