How I Built a Cinematic Toothless Login Portal with Angular 21 🐉

#angular #showdev #css #webdev

Have you ever wanted to build something so fun that you
forgot you were even coding? That's exactly what happened
when I built this — a fully cinematic, interactive login
portal featuring Toothless the Night Fury from
How to Train Your Dragon 🐉

🔗 Live Demo

👉 Try it here

💻 View Source on GitHub

✨ What Does It Do?

This isn't just a login form. Toothless reacts to everything you do:

👀 Eye Tracking — the dragon's pupils follow your cursor in real time as you move around the screen
🪽 Shy Behavior — when you click the password field, Toothless lowers his wings and hides shyly
⚡ Plasma Charge — hitting the login button triggers a full plasma charging animation sequence
🌩️ Cinematic Thunder — custom lightning and thunder effects fire during dramatic moments

🛠️ Tech Stack

Angular 21 — component architecture and reactive form state handling
Tailwind CSS v3 — all layout and utility styles
Pure SVG — Toothless is hand-crafted SVG, no images or libraries
CSS Keyframe Animations — all motion is pure CSS
Gemini AI — used to engineer the cinematic animation sequences and thunder/lightning effects

💡 How the Eye Tracking Works

The core idea is simple — track the mouse position
relative to the eye center and move the pupils:

@HostListener('mousemove', ['$event'])
onMouseMove(event: MouseEvent) {
  const eyeRect = this.eyeElement.getBoundingClientRect();
  const eyeCenterX = eyeRect.left + eyeRect.width / 2;
  const eyeCenterY = eyeRect.top + eyeRect.height / 2;

  const angle = Math.atan2(
    event.clientY - eyeCenterY,
    event.clientX - eyeCenterX
  );

  const distance = 4; // max pupil travel distance
  this.pupilX = Math.cos(angle) * distance;
  this.pupilY = Math.sin(angle) * distance;
}

The pupils are constrained to a small radius so they
never go outside the eye boundary — giving a natural
realistic feel.

🪽 How the Shy Behavior Works

When the password field receives focus, Angular's
reactive form detects the state change and triggers
a CSS class that animates the wings downward:

onPasswordFocus() {
  this.isPasswordFocused = true; // wings lower
}

onPasswordBlur() {
  this.isPasswordFocused = false; // wings rise back
}

In the template:

<div [class.wings-down]="isPasswordFocused" 
     class="toothless-wings">
</div>

⚡ The Plasma Charge Sequence

On form submission, a multi-stage animation fires:

Toothless opens his mouth
A glowing plasma orb builds up
The orb pulses and expands
A flash covers the screen
Login success state appears

This entire sequence is timed using Angular's
setTimeout chain synced with CSS animation durations.

DEV Community