Gimmicks

A fixed full-viewport column grid overlay that slides in and out with a staggered GSAP animation. Useful during development to verify that layouts align with the underlying grid. Toggled by keyboard shortcut (Shift+G) or any element with [data-animated-grid-toggle]. State is persisted in localStorage.

A GSAP-powered snowflake particle system that clones a template element, animates each flake falling with random scale, opacity, sway, and rotation, and fades it out before removal. Strength and infinite/burst mode are controlled via data attributes. Prevents double-initialization and caps active flakes.

A CSS wireframe globe whose rotation speed scales with scroll velocity. Eight mirrored ring segments animate in a looping GSAP timeline; when the user scrolls, the timeline's timeScale spikes based on scroll speed and eases back to 1x after scrolling stops.

A mascot face that tracks the cursor using GSAP quickTo, with movement intensity and per-target multipliers set via data attributes. ScrollTrigger pauses tracking when the section is out of view. A bonus CSS hover state swaps the face expression.

An interactive 404 error page featuring a physics-based rocket launch minigame. Users pull back a rocket on a slingshot, release to send it flying, and if it hits the target a confetti explosion celebrates the win and shows the elapsed time.

A set of image stickers scattered over a hero section that users can freely drag around. Each sticker scales, rotates, and gains a drop-shadow on grab, then snaps back with a bouncy ease on release.

Physics-based falling objects rendered on a Matter.js canvas injected into the page. Circular bodies with custom textures drop under gravity, bounce off walls, and can be dragged around with the mouse or touch.

Swaps the browser tab title to a custom message when the user switches away from the tab, and restores the original title when they return.

Clicking anywhere on the page bursts 3–10 coloured dot particles from the cursor position. Each dot pops in, then scatters outward in a random direction under simulated gravity before fading away.

Clicking a trigger button launches a shower of emoji images that rise up from the bottom of the viewport. Two emoji types alternate per button, with random sizes, delays, speeds, and a swaying child animation.