---
title: "Animations & Splash Effects"
description: "A guide prompt and complete reference for building an animated hero with a splash intro, staggered reveals, and a cursor spotlight."
---
> Documentation Index
> Fetch the complete documentation index at: https://papers.ahmad.wtf/llms.txt
> Use this file to discover all available pages before exploring further.
# Animations & Splash Effects
Use this as a copy-ready prompt for recreating a creative-studio landing
experience: a full-screen splash intro, staggered entrance animations, and an
interactive cursor spotlight that reveals a second image. Each effect below is
self-contained CSS/JS, and the full implementation is at the end.
## What's inside
- **Splash intro** — a 5×2 grid of panels that slide off-screen (top row up,
bottom row down) with a staggered delay, then fades itself out.
- **Hero image entrance** — the base image scales and un-rotates into place.
- **Word reveal** — the headline animates word-by-word with a blur-to-focus lift.
- **CTA entrance + hover** — the button slides up and scales in, and its pill
background expands on hover while the arrow circle shifts.
- **Creator text slide** — the oversized background word rises from below.
- **Cursor spotlight reveal** — a canvas radial gradient masks a second image so
it only shows under a soft light that trails the pointer.
- **Reduced-motion fallback** — everything collapses to a static, visible state.
## Splash intro
The splash is a fixed overlay split into two rows of five boxes. Top-row boxes
translate up, bottom-row boxes translate down, each offset by `0.05s`. After the
sequence finishes, `splashHide` fades the whole overlay and drops it out of the
flow.
```css
.splash {
position: fixed; inset: 0;
z-index: 9999;
pointer-events: none;
animation: splashHide 0.3s ease forwards;
animation-delay: 1.35s;
}
.splash-box:nth-child(1) { animation-delay: 0s; }
.splash-box:nth-child(2) { animation-delay: 0.05s; }
.splash-box:nth-child(3) { animation-delay: 0.1s; }
.splash-box:nth-child(4) { animation-delay: 0.15s; }
.splash-box:nth-child(5) { animation-delay: 0.2s; }
@keyframes splashTop { from { transform: translateY(0%); } to { transform: translateY(-100%); } }
@keyframes splashBottom { from { transform: translateY(0%); } to { transform: translateY(100%); } }
@keyframes splashHide { to { opacity: 0; visibility: hidden; } }
```
## Staggered entrances
The hero image, headline words, CTA, and background word each start hidden and
animate in on a timeline (delays between `1s` and `1.5s`) so they land just as
the splash clears.
```css
@keyframes heroImageIn {
from { opacity: 0; transform: scale(1.5) rotate(3deg); }
to { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes wordReveal {
from { opacity: 0; transform: translateY(10px); filter: blur(10px); }
to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes slideUpScale {
from { opacity: 0; transform: translateY(60px) scale(0.4); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
```
The headline words are split in JS and each given an incremental
`animation-delay`:
```js
const words = text.split(' ');
words.forEach((word, i) => {
const span = document.createElement('span');
span.className = 'word-reveal';
span.textContent = word;
span.style.animationDelay = (1 + i * 0.05) + 's';
headline.appendChild(span);
});
```
## Cursor spotlight reveal
Two stacked images share the same position. The top image is masked by a canvas
that draws a soft radial gradient at the pointer. The pointer position is eased
(`smooth += (mouse - smooth) * 0.1`) so the light trails behind the cursor, and
the canvas is re-serialized to a mask each frame.
```js
function loop() {
smooth.x += (mouse.x - smooth.x) * 0.1;
smooth.y += (mouse.y - smooth.y) * 0.1;
ctx.clearRect(0, 0, canvas.width, canvas.height);
const grad = ctx.createRadialGradient(smooth.x, smooth.y, 0, smooth.x, smooth.y, SPOTLIGHT_R);
grad.addColorStop(0, 'rgba(255,255,255,1)');
grad.addColorStop(0.75, 'rgba(255,255,255,0.4)');
grad.addColorStop(1, 'rgba(255,255,255,0)');
ctx.beginPath();
ctx.arc(smooth.x, smooth.y, SPOTLIGHT_R, 0, Math.PI * 2);
ctx.fillStyle = grad;
ctx.fill();
const dataUrl = canvas.toDataURL();
imgLayer.style.maskImage = 'url(' + dataUrl + ')';
imgLayer.style.webkitMaskImage = 'url(' + dataUrl + ')';
requestAnimationFrame(loop);
}
```
## Full reference implementation
The complete, self-contained page — every animation, the navigation, the menu
panel, and the spotlight — in one file.
```html title="creative-studio-showcase.html"
Creative Studio Showcase
