DEV Community: Muhammad Abdu ar Rahman

Zoro Santoryu Splash Screen — 30 Days Web Challenge Day 4

Muhammad Abdu ar Rahman — Tue, 12 May 2026 02:23:38 +0000

Try it live at 30days.abduarrahman.com — and the source code is on GitHub.

The Origin

Day 4 needed a splash screen. A proper, cinematic intro — not just a loading spinner. I'm a One Piece fan, and Zoro's Santoryu (Three-Sword Style) is iconic. What if the splash screen was Zoro running, then slashing the screen three times until it shatters?

The result: a multi-phase splash screen with pixel art Zoro running, a loading bar, a dramatic Santoryu reveal, three timed slashes with screen shake, and a shatter effect that breaks the screen into 9 fragments.

What I Built

A cinematic splash screen with 5 phases:

Tap to Start — Pixel art Zoro running animation on a clean white screen
Loading — Progress bar fills over 5 seconds while Zoro keeps running, ambient music plays
Santoryu — Loading music fades out, dramatic Santoryu image zooms in with impact
Slash — Three timed sword slashes with blade tips, scar lines, sparks, and screen shake
Shatter — Screen breaks into 9 fragments that fly apart with debris particles

All powered by a single ZoroPixelLoader canvas component and Framer Motion for phase transitions.

How It Works

Canvas Sprite Animator

The ZoroPixelLoader renders pixel art sprite sheets onto a canvas with frame-by-frame animation:

const SPRITES: Record<string, SpriteConfig> = {
  run:   { src: "/zoro_run.png", frameW: 445, frameH: 363 },
  slash: { src: "/zoro.png",     frameW: 290, frameH: 349 },
};

export default function ZoroPixelLoader({ sprite = "run", fps = 14, scale = 0.5 }) {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const frameRef = useRef(0);
  const rafRef = useRef<number>(0);
  const lastTimeRef = useRef(0);
  const config = SPRITES[sprite];
  const fpsInterval = 1000 / fps;

  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const ctx = canvas.getContext("2d");
    if (!ctx) return;

    const img = new Image();
    img.src = config.src;

    const animate = (time: number) => {
      const delta = time - lastTimeRef.current;
      if (delta >= fpsInterval) {
        lastTimeRef.current = time - (delta % fpsInterval);
        const frame = frameRef.current;
        const col = frame % COLS;
        const row = Math.floor(frame / COLS);

        ctx!.clearRect(0, 0, config.frameW, config.frameH);
        ctx!.drawImage(
          img,
          col * config.frameW, row * config.frameH,
          config.frameW, config.frameH,
          0, 0, config.frameW, config.frameH
        );
        frameRef.current = (frame + 1) % TOTAL_FRAMES;
      }
      rafRef.current = requestAnimationFrame(animate);
    };

    img.onload = () => {
      ctx!.imageSmoothingEnabled = false; // crisp pixel art
      rafRef.current = requestAnimationFrame(animate);
    };

    return () => cancelAnimationFrame(rafRef.current);
  }, [sprite, config, fpsInterval]);

  return (
    <canvas
      ref={canvasRef}
      width={config.frameW}
      height={config.frameH}
      style={{ imageRendering: "pixelated", width: config.frameW * scale, height: config.frameH * scale }}
    />
  );
}

The key detail: imageSmoothingEnabled = false and imageRendering: "pixelated" keep the pixel art crisp at any scale.

Slash Sequence Timing

Three slashes are precisely timed using constants:

const SLASH_SOUND_DUR = 576;    // ms — matches the slash sound effect length
const NUM_SLASHES = 3;
const SLASH_INTERVAL = SLASH_SOUND_DUR;  // each slash starts after previous sound ends
const TOTAL_SLASH_TIME = NUM_SLASHES * SLASH_INTERVAL;
const SANTORYU_DUR = 2736;      // ms — duration of the Santoryu vocal sample

const SLASHES = [
  { angle: -30, delay: 0 },
  { angle: 15,  delay: SLASH_INTERVAL },
  { angle: -50, delay: SLASH_INTERVAL * 2 },
];

Each slash has a blade tip that sweeps across, a persistent scar line, sparks, and a white flash.

Screen Shatter Physics

After the three slashes, the screen shatters into 9 fragments using CSS clipPath polygons:

const FRAGMENTS = [
  { clipPath: "polygon(0 0, 33% 0, 33% 33%, 0 33%)",     origin: "0% 0%",    x: "-20%", y: "-30%", rot: -6 },
  { clipPath: "polygon(33% 0, 66% 0, 66% 33%, 33% 33%)",  origin: "50% 16%",   x: "0%",   y: "-35%", rot: 3 },
  { clipPath: "polygon(66% 0, 100% 0, 100% 33%, 66% 33%)", origin: "100% 0%",  x: "25%",  y: "-25%", rot: 8 },
  // ... 6 more fragments covering the full screen
];

// Each fragment animates away from its transform origin

Audio Transitions

Three audio tracks crossfade during the sequence:

Loading music — loops during the progress bar phase, fades out over ~600ms when Santoryu triggers
Santoryu vocal — plays once during the reveal image
Slash sounds — three precisely timed hits, one per slash

const triggerSantoryu = useCallback(() => {
  // Fade out loading music
  const loadAudio = loadingAudioRef.current;
  if (loadAudio) {
    const fade = setInterval(() => {
      if (loadAudio.volume > 0.05) {
        loadAudio.volume = Math.max(0, loadAudio.volume - 0.05);
      } else {
        loadAudio.pause();
        clearInterval(fade);
      }
    }, 30);
  }

  // Play Santoryu vocal
  const santoryu = new Audio(SANTORYU_MUSIC);
  santoryu.volume = 0.8;
  santoryu.play().catch(() => {});

  // Start slashes after vocal ends
  santoryu.onended = () => startSlash();
}, [onComplete]);

Tech Stack

Technology	Purpose
Next.js	React framework
TypeScript	Type-safe phase management
HTML Canvas	Pixel art sprite animation (ZoroPixelLoader)
Framer Motion	Phase transitions, screen shake, fragment animations
CSS clipPath	Screen shatter fragments
Web Audio	Music crossfade, timed slash sounds

Granloop Arena TV — Pixel Art Fighting Game — 30 Days Web Challenge Day 3

Muhammad Abdu ar Rahman — Tue, 12 May 2026 02:23:07 +0000

Try it live at 30days.abduarrahman.com — and the source code is on GitHub.

The Origin

Day 3 needed to be different from precision timers and math animations. The community wanted something visual, something chaotic, something that plays itself. Someone said "make them fight" — so I built a pixel art arena where characters bounce around and beat each other up.

The Granloop Arena TV is a self-contained fighting game in a draggable, collapsible TV widget that sits on the landing page. Two teams — Granmaja (orange) vs Bloop (purple) — fight in a 2v2 pixel art brawl until one team is eliminated.

What I Built

A complete 2v2 pixel art fighting game with:

4 pixel art characters — 2 Granmaja and 2 Bloop with sprite animations for walking in all 4 directions
Real-time physics — characters bounce around the arena with velocity, wall reflections, and speed normalization
Collision detection — when characters overlap, they bounce off each other with velocity exchange
Cross-team damage — collisions between different teams deal random damage (50-3000 per hit)
Individual HP bars — each character has their own health bar that changes color as HP drops
KO system — when both members of a team reach 0 HP, the match ends with a winner screen
Rematch button — instantly reset and start a new fight
Draggable TV widget — the whole arena is a movable, collapsible window
Synthesized sound effects — clash and KO sounds via Web Audio API

How It Works

Sprite Animation System

Characters use CSS-based sprite sheet animation. Each direction has a sprite sheet with multiple frames, and the game loop advances frames at 120ms intervals:

function bgPos(d: Direction, f: number, c: SpriteConfig): string {
  if (d === "right" || d === "left") {
    const tf = c.rightCols * c.rightRows;
    const fr = f % tf;
    const col = fr % c.rightCols;
    const row = Math.floor(fr / c.rightCols);
    return `${-(col * SZ)}px ${-(row * SZ)}px`;
  }
  return `0px ${-(f % c.upDownFrames) * SZ}px`;
}

Characters face left by flipping the right-facing sprite with scaleX(-1). The direction is determined by velocity:

const ax = Math.abs(ch.vx), ay = Math.abs(ch.vy);
ch.dir = ay > ax ? (ch.vy < 0 ? "up" : "down") : (ch.vx < 0 ? "left" : "right");

Collision Detection & Damage

Every frame, all character pairs are checked for collisions. When two characters from different teams overlap:

const colD = SZ * 0.65; // collision distance (65% of sprite size)
for (let i = 0; i < 4; i++) {
  if (c[i].hp <= 0) continue;
  for (let j = i + 1; j < 4; j++) {
    if (c[j].hp <= 0) continue;
    const dx = c[i].x - c[j].x, dy = c[i].y - c[j].y;
    const dist = Math.sqrt(dx * dx + dy * dy);
    if (dist >= colD || c[i].ct > 0 || c[j].ct > 0) continue;

    // Bounce apart with velocity exchange
    const overlap = colD - dist;
    const px = (dx / dist) * overlap * 0.6;
    c[i].x += px; c[j].x -= px;
    const nx = dx / dist;
    const dot = (c[i].vx - c[j].vx) * nx + (c[i].vy - c[j].vy) * ny;
    c[i].vx -= dot * nx; c[j].vx += dot * nx;

    // Cross-team damage only
    if (TEAM[i] !== TEAM[j]) {
      const di = rDmg(), dj = rDmg(); // 50-3000 random damage
      c[i].hp = Math.max(0, c[i].hp - di);
      c[j].hp = Math.max(0, c[j].hp - dj);
    }
  }
}

The ct (cooldown timer) prevents the same pair from hitting each other every frame — they need to separate first.

KO Detection

After each hit, the game checks if both members of either team are dead:

const t0alive = c[0].hp > 0 || c[1].hp > 0;
const t1alive = c[2].hp > 0 || c[3].hp > 0;
if (!t0alive || !t1alive) {
  overR.current = true;
  const w = !t0alive && !t1alive ? -1 : !t0alive ? 1 : 0;
  setWinner(w);
  playKO();
}

Draggable Widget

The entire TV is draggable by its header bar, using mouse/touch events:

const onDragStart = useCallback((e: React.MouseEvent | React.TouchEvent) => {
  const cx = "touches" in e ? e.touches[0].clientX : e.clientX;
  const cy = "touches" in e ? e.touches[0].clientY : e.clientY;
  const ox = pos.x === -1 ? (rootRef.current?.offsetLeft ?? 16) : pos.x;
  const oy = pos.y === -1 ? (rootRef.current?.offsetTop ?? window.innerHeight - (TV_H + 160)) : pos.y;
  dragRef.current = { sx: cx, sy: cy, ox, oy };
}, [pos]);

Tech Stack

Technology	Purpose
Next.js	React framework
TypeScript	Type-safe game logic
CSS Sprite Sheets	Pixel art character animation
requestAnimationFrame	60fps game loop
Web Audio API	Clash and KO sound synthesis
React Refs	Direct DOM manipulation for performance

ASCII Donut Math Animation — 30 Days Web Challenge Day 2

Muhammad Abdu ar Rahman — Tue, 12 May 2026 02:06:27 +0000

Try it live at 30days.abduarrahman.com — and the source code is on GitHub.

The Origin

Every programmer has seen donut.c — the legendary C code that renders a spinning 3D torus using ASCII characters. It's a rite of passage.

For Day 2 of the 30 Days Web Challenge, I wanted to bring this classic to the browser — not just as a static render, but as an interactive element with glitch effects and sound. The donut sits on the landing page as the "0" in "30 Days", and clicking it reveals hidden easter eggs.

What I Built

A real-time ASCII torus renderer with:

Mathematical torus rendering — the classic sin/cos projection with z-buffer depth sorting and luminance mapping
Smooth rotation — two rotation angles (A and B) increment each frame for continuous spinning
Glitch mode — clicking the donut adds random rotation offsets and luminance scrambling
Neon glow styling — cyan text with textShadow for that retro terminal feel
Interactive easter egg — click the donut 5 times on the landing page to trigger an explosion with particles

How It Works

The Torus Rendering Algorithm

The core is the classic donut math — project a 3D torus onto a 2D character grid using two rotation angles:

const render = () => {
  const b = new Int8Array(width * height).fill(-1); // output buffer
  const z = new Float32Array(width * height);         // z-buffer

  const sA = Math.sin(A), cA = Math.cos(A);
  const sB = Math.sin(B), cB = Math.cos(B);

  for (let j = 0; j < 6.283185; j += 0.07) {   // theta: around the tube
    const st = Math.sin(j), ct = Math.cos(j);
    for (let i = 0; i < 6.283185; i += 0.02) {  // phi: around the ring
      const sp = Math.sin(i), cp = Math.cos(i);
      const h = ct + 2;
      const D = 1 / (sp * h * sA + st * cA + 5);  // perspective
      const t = sp * h * cA - st * sA;

      const x = ~~(cx + kx * D * (cp * h * cB - t * sB));
      const y = ~~(cy + ky * D * (cp * h * sB + t * cB));

      const o = x + width * y;
      const N = ~~(8 * ((st * sA - sp * ct * cA) * cB
        - sp * ct * sA - st * cA - cp * ct * sB));

      if (y > 0 && y < height && x > 0 && x < width && D > z[o]) {
        z[o] = D;
        b[o] = N > 0 ? N : -1;
      }
    }
  }

  // Render to <pre> element using luminance characters
  if (preRef.current) {
    let s = "";
    for (let k = 0; k < width * height; k++) {
      if (k > 0 && k % width === 0) s += "\n";
      s += b[k] >= 0 ? lum[b[k]] : " ";
    }
    preRef.current.textContent = s;
  }

  A += 0.015;
  B += 0.008;
  frameId = requestAnimationFrame(render);
};

The luminance string .,-~:;=!*#$@ maps brightness values to ASCII characters — from dim (dot) to bright (@).

Glitch Mode

When the donut is clicked on the landing page, random offsets are injected into the rotation calculations, and 15% of luminance values get randomly scrambled:

// Glitch: add random rotation offset
const glitchA = glitching ? (Math.random() - 0.5) * 0.5 : 0;
const glitchB = glitching ? (Math.random() - 0.5) * 0.3 : 0;

// During glitch, randomly scramble luminance
if (glitching && Math.random() < 0.15) {
  b[o] = ~~(Math.random() * 12);
} else {
  b[o] = N > 0 ? N : -1;
}

The visual styling switches from calm cyan to chaotic rainbow with red/orange glow:

style={{
  color: glitching ? `hsl(${Math.random() * 360}, 100%, 70%)` : "#00AFFF",
  textShadow: glitching
    ? "0 0 8px #ff0066, 0 0 20px #ff6600"
    : "0 0 6px #00AFFF, 0 0 20px #0077ff",
}}

The 5-Click Easter Egg

The donut is interactive — each click triggers a 1-second glitch with a synthesized sound. After 5 clicks, the donut explodes into 30 colored particles:

const handleDonutClick = useCallback(() => {
  if (isGlitching || isExploding || showDonutPopup) return;
  const newCount = donutClicks + 1;

  if (newCount >= 5) {
    // BOOM!
    setDonutClicks(0);
    setIsExploding(true);
    playExplosionSound();

    const colors = ["#00AFFF", "#00E676", "#ff0066", "#ff6600", "#6C5CE7", "#FFD700"];
    const particles = Array.from({ length: 30 }, (_, i) => ({
      id: explosionId.current++,
      x: 50, y: 40,
      angle: (i / 30) * Math.PI * 2 + Math.random() * 0.5,
      speed: 5 + Math.random() * 15,
      color: colors[i % colors.length],
    }));
    setExplosionParticles(particles);
  } else {
    // Glitch for 1 second
    setDonutClicks(newCount);
    setIsGlitching(true);
    playGlitchSound();
  }
}, [donutClicks, isGlitching, isExploding, showDonutPopup]);

Tech Stack

Technology	Purpose
Next.js	React framework
TypeScript	Type-safe math operations
Canvas / pre element	ASCII character rendering
Web Audio API	Glitch and explosion sound synthesis
Framer Motion	Particle animations for explosion

Magikarp Countdown Challenge — 30 Days Web Challenge Day 1

Muhammad Abdu ar Rahman — Tue, 12 May 2026 01:58:06 +0000

Try it live at 30days.abduarrahman.com — and the source code is on GitHub.

The Origin

It started with a random comment in a group chat: "You should build one web feature every day for 30 days." Someone said it as a joke. I took it seriously.

Day 1 had to set the tone. Something fun, something with sound, something that hooks you in. I thought about dice, timers, and the classic Magikarp meme — why not make people chase a bouncing fish before they even start the challenge?

The Magikarp Countdown Challenge was born: roll 4 dice to get a random target (1000-9999 milliseconds), then try to stop a precision timer at exactly that number. Hit it? The countdown drops. Miss it? Time goes up. Run out of time? Game over. But there's an easter egg...

What I Built

A multi-phase mini-game with:

Bouncing Magikarp landing screen — a fish that bounces around the screen with physics, bubble trails, and ripple effects. Click it to start
4-dice rolling sequence — dice fly in from random angles, land with satisfying sounds, and combine into a target number
Precision timer matching — stop the millisecond timer at exactly the target number
Live countdown — the timer ticks down in real-time with color changes (blue → yellow → red)
Easter egg: the Gyarados glitch — get within ±100ms of the target and the screen glitches out with a multi-layered digital crash sound, then reveals Gyarados
Synthesized audio — all sounds are generated with the Web Audio API (no audio files needed)

How It Works

Dice Rolling with Sound Synthesis

Each die rolls with a rapid randomization animation, then lands on its final value. The sound is synthesized on-the-fly using the Web Audio API — a noise burst through a bandpass filter that mimics dice clatter:

const playDiceSound = useCallback(() => {
  try {
    const ctx = new AudioContext();
    const duration = 0.15;
    const bufferSize = ctx.sampleRate * duration;
    const buffer = ctx.createBuffer(1, bufferSize, ctx.sampleRate);
    const data = buffer.getChannelData(0);

    // Generate noise burst (sounds like dice clatter)
    for (let i = 0; i < bufferSize; i++) {
      const t = i / ctx.sampleRate;
      const envelope = Math.exp(-t * 30);
      data[i] = (Math.random() * 2 - 1) * envelope * 0.3;
    }

    const source = ctx.createBufferSource();
    source.buffer = buffer;

    // Band-pass filter for dice-like tone
    const filter = ctx.createBiquadFilter();
    filter.type = "bandpass";
    filter.frequency.value = 3000;
    filter.Q.value = 1;

    source.connect(filter);
    filter.connect(ctx.destination);
    source.start();
    source.stop(ctx.currentTime + duration);
    setTimeout(() => ctx.close(), 500);
  } catch {}
}, []);

The dice fly to random positions using pre-generated landing spots:

function generateDiceLandingSpots() {
  return [0, 1, 2, 3].map(() => ({
    x: (Math.random() - 0.5) * 80,  // -40% to +40% from center
    y: (Math.random() - 0.5) * 60,  // -30% to +30% from center
    rotate: Math.floor(Math.random() * 90 - 45),
  }));
}

Timer Matching Logic

The core mechanic: 4 dice combine into a target number (e.g. 4-2-7-1 = 4271ms). You click to start a count-up timer, then click again to stop it. If you hit the exact number, the countdown drops. Miss it, and time goes up:

const handleClick = () => {
  if (gameState !== "counting") return;
  cancelAnimationFrame(rafRef.current);
  setIsCounting(false);

  const clickedMs = Math.round(countUpRef.current);
  const gap = Math.abs(clickedMs - targetNumber);

  if (clickedMs === targetNumber) {
    // Exact match — countdown drops
    setMatchResult("exact");
    const newCountdown = liveCountdown - targetNumber / 1000;
    if (newCountdown <= 0) {
      setGameState("victory");
    }
  } else if (gap <= 100) {
    // Easter egg: ±100ms → crash → glitch → Gyarados!
    setMatchResult("exact");
    setTimeout(() => setGameState("glitch"), 500);
    setTimeout(() => setGameState("victory"), 4500);
  } else {
    // Miss — countdown increases
    setMatchResult("miss");
    const newCountdown = liveCountdown + targetNumber / 1000;
    setCountdown(newCountdown);
  }
};

The Glitch Easter Egg

When you hit within ±100ms, the game triggers a 4-layer glitch sound: a sawtooth oscillator sweep, a square wave digital screech, gated white noise, and rapid digital beeps — all synthesized in real-time with the Web Audio API.

Magikarp Landing Physics

The landing screen features a bouncing Magikarp driven by requestAnimationFrame:

const animate = (time: number) => {
  if (!lastTimeRef.current) lastTimeRef.current = time;
  const delta = Math.min((time - lastTimeRef.current) / 16, 3);
  lastTimeRef.current = time;

  const { vx, vy } = velRef.current;
  const { x, y } = posRef.current;
  let nx = x + vx * delta;
  let ny = y + vy * delta;

  // Bounce off walls
  if (nx < marginX) { nx = marginX; bvx = Math.abs(bvx); }
  if (nx > 100 - marginX) { nx = 100 - marginX; bvx = -Math.abs(bvx); }
  if (ny < marginY) { ny = marginY; bvy = Math.abs(bvy); }
  if (ny > 90 - marginY) { ny = 90 - marginY; bvy = -Math.abs(bvy); }

  // Randomize direction on bounce
  if (bounced) {
    bvx += (Math.random() - 0.5) * 0.3;
    bvy += (Math.random() - 0.5) * 0.3;
    const speed = Math.sqrt(bvx * bvx + bvy * bvy);
    const targetSpeed = 0.2 + Math.random() * 0.15;
    if (speed > 0) {
      bvx = (bvx / speed) * targetSpeed;
      bvy = (bvy / speed) * targetSpeed;
    }
  }
};

Tech Stack

Technology	Purpose
Next.js	React framework with static export
TypeScript	Type-safe game logic
Framer Motion	Dice animations, card reveals, sparkle effects
Web Audio API	Synthesized dice sounds, glitch effects, tick sounds
CSS Animations	Background particles, ambient glow effects

DEV Community: Muhammad Abdu ar Rahman

Zoro Santoryu Splash Screen — 30 Days Web Challenge Day 4

The Origin

What I Built

How It Works

Canvas Sprite Animator

Slash Sequence Timing

Screen Shatter Physics

Audio Transitions

Tech Stack

Links

Granloop Arena TV — Pixel Art Fighting Game — 30 Days Web Challenge Day 3

The Origin

What I Built

How It Works

Sprite Animation System

Collision Detection & Damage

KO Detection

Draggable Widget

Tech Stack

Links

ASCII Donut Math Animation — 30 Days Web Challenge Day 2

The Origin

What I Built

How It Works

The Torus Rendering Algorithm

Glitch Mode

The 5-Click Easter Egg

Tech Stack

Links

Magikarp Countdown Challenge — 30 Days Web Challenge Day 1

The Origin

What I Built

How It Works

Dice Rolling with Sound Synthesis

Timer Matching Logic

The Glitch Easter Egg

Magikarp Landing Physics

Tech Stack

Links