TEAM ONBOARDING
A dark-theme onboarding site for a new team member: GSAP character animations, mouse-tracked gradient cards, and a live RSS feed, all in plain HTML/CSS/JS. Ships as static files, no build step, loads in under a second.
The droid fades in on load, floats idle, and types out the welcome message character by character. It runs on GSAP timelines and about 200 lines of JS, with the full site coming in around 600.
8 modules, structured by role
From "Who we are" through to "Objection handling", each module is its own HTML file with its own accent color. The mouse position writes into CSS variables, and every card draws its radial glow from there.
A reference wiki that sits alongside
The modules run once; the wiki stays open beside them. A toolbox (tools.html), a cheat sheet (schnellreferenz.html), and a funding overview (foerderungen.html), each its own HTML file, linked from every module where it's relevant.
Interactive AI Glossary
The AI vocabulary a new hire needs before their first client call: 10 terms across four categories, with live search, filters, and accordion cards. Multilingual search terms are baked in, so typing "Sprachmodell" finds "LLM".
Live feed from 8 YouTube channels
Browser-side RSS fetching through rss2json.com, no backend. A priority system decides what shows up: P1 channels stay visible, P2 and P3 rotate at random.
Onboarding Modules
YouTube Channels
Glossary Terms
npm Dependencies
How the cursor glow works
The glow runs on two layers that lerp toward the mouse at different speeds, so the highlight feels responsive while the ambient ring drags behind it. Both move on the GPU via translate3d.
// Dual-layer cursor glow — GPU-accelerated via translate3d
// Outer layer: slow lerp (0.07) for ambient glow
// Inner layer: fast lerp (0.2) for responsive highlight
outerX += (mouseX - outerX) * 0.07;
outerY += (mouseY - outerY) * 0.07;
outer.style.transform = `translate3d(${outerX}px,${outerY}px,0) translate(-50%,-50%)`;
innerX += (mouseX - innerX) * 0.2;
innerY += (mouseY - innerY) * 0.2;
inner.style.transform = `translate3d(${innerX}px,${innerY}px,0) translate(-50%,-50%)`;Why it's built the way it is
- →I skipped React here
GSAP loads from a CDN and everything else is plain JS, so there's no build step: I scp the files onto the VPS and it runs. A framework would have added weight I'd never use.
- →GSAP handles the droid entrance
Scale, position, and rotation have to fire in an exact order, and a GSAP timeline expresses that dependency cleanly where CSS keyframes get awkward.
- →The feed runs without a backend
rss2json.com lets the browser pull the RSS directly, and the priority system keeps relevant channels on top without anyone curating a feed list.