A hands-on workshop

Motion for the
Sovereign Web

Give an interface a soul in 45 minutes.

The plan

01Learn the moves

Tweens, timelines, staggers, eases — everything you need, nothing you don't. ~20 min.

02Grab the template

The actual first fold of sovereignengineering.io, ready to animate. Zero install.

03Prompt your intro

45 minutes, one timeline. You describe the motion; the AI writes the code.

04Show & tell

30 seconds each on the big screen. Press replay twice. Applause mandatory.

Why intro animations?

First 3 seconds

An interface that enters with intention feels trustworthy before a single word is read.

Motion is meaning

Sequence tells the user what matters first. An intro is a story with an order.

Sovereign ≠ sterile

Freedom tech deserves craft. Our tools should feel alive, not like tax software.

Engagement

Motion pulls people in — a well-crafted intro increases engagement by 70%.

GSAP in 60 seconds

One function, one element, one destination. That's a tween.

gsap.to(".box", { x: 560, rotation: 360, duration: 1.5 });

gsap.from(".box", { opacity: 0, y: -40 });  // enter FROM somewhere

Timelines & staggers

Chain tweens into a sequence. Stagger makes many elements one gesture.

const tl = gsap.timeline();
tl.from(".dot", { y: 60, opacity: 0, stagger: 0.1, ease: "back.out(2)" })
  .to(".dot", { scale: 1.2, yoyo: true, repeat: 1, stagger: 0.1 }, "-=0.3");

Easing is the personality

Same move, four characters. Choose who your interface is.

power1.out
power4.out
elastic.out
bounce.out

Explore them all: gsap.com/ease

Get set up

…

  1. Open the URL above and download template.zip
  2. Unzip it — GSAP is inside, no install, works offline
  3. Open index.html in your browser
  4. Point your AI at main.js and prompt
  5. Save → refresh the browser. That's the loop.

Nothing else to set up — the zip is the whole workshop kit.

You prompt. It moves.

You won't write GSAP by hand — you'll describe motion to an AI. The better your vocabulary, the better your intro. Name the move:

particlesstaggercascade blur revealtypewriterscramble count-updraw-onovershoot elasticbounceparallax rippleflickercolor flood pulsecamera movebeat & hold

Formula: element + move + order + personality + timing — and always end with "keep the ↻ replay button working."

Open the full vocabulary

Watch the examples

Four intros from real projects — two rebuilt here, two live sites. Watch each twice.

🪟 hyprgate

The real boot intro: power glyph, gate cut, particle wordmark, warp — ends at login.

🌱 Plan-B

The real three-stage typographic intro, ending on the glossy paint title.

📦 A to B

The real thing, live — app.atobitcoin.io plays its intro on load (new tab).

📞 Call The Operator

The real thing, live — the dreamcore three.js intro (new tab).

Take time to imagine

Take 5 minutes to imagine the intro in your mind's eye before starting.

The brief

⏱45 minutes — one timeline, played on load

Keep ↻ replay working — you present with it.
Motion tells the story; the page itself stays as it is.
Stuck? Raise a hand. Done early? Add a second act.

Go make it move

This is your canvas — sovereignengineering.io's first fold. Make it enter with style.

← → to navigate