Match Stick Animation

This project creates an interactive web animation of a match stick that users can "ignite" and "extinguish." The main purpose is to provide a realistic, tactile experience where swiping quickly over the match simulates striking it, causing it to light up with a flickering flame, sparks, and sound. Once lit, the match visually burns down over time, and a click allows the user to extinguish it, revealing smoke and a hiss sound before it resets.

The project's structure is built with a single HTML file that defines the match stick's components, including its head, stick, and separate containers for the flame, sparkles, and smoke.

<div class="match" id="match">
  <div class="flame-container" id="flame-container">
    <div class="flame"></div>
    <div class="sparkles" id="sparkles"></div>
  </div>
  <div class="match-head" id="match-head"></div>
  <div class="match-stick"></div>
</div>

This snippet shows the basic HTML structure of the match stick, including its head, stick, and containers for the flame, sparkles, and smoke elements.

CSS is extensively used to style these elements and create all the visual effects. It defines the appearance of the match head, stick, and flame using gradients and shadows. Keyframe animations (@keyframes flicker, @keyframes sway, @keyframes explode, @keyframes smokeRise) bring the flame, sparks, and smoke to life with dynamic movement. The body.lit and body.extinguished classes are crucial for triggering these animations and changing the match's visual state, such as the match head turning black or the stick showing a burnt effect.

.match-stick::after {
  content: '';
  position: absolute;
  /* ... other styles ... */
  height: 0%; /* Initially hidden */
  transition: height 0s; /* Instant reset */
}
body.lit .match-stick::after {
  height: 60%; /* Burnt area grows */
  transition: height 15s linear; /* Burns down over 15 seconds */
}

This CSS demonstrates how a pseudo-element on the match stick creates a burnt effect that gradually extends downwards over 15 seconds when the body has the lit class.

The JavaScript handles user interaction and state management. It tracks mouse or touch movements (handleMove) to detect fast swipes over the match, accumulating "heat." When enough heat is generated, the ignite() function is called, which adds the lit class to the body to activate the flame and burning animations. Conversely, clicking the body triggers the extinguishing logic, adding the extinguished class to initiate smoke animations and resetting the match's state after a delay.

if (isOverMatch && speed > MIN_SPEED_THRESHOLD) {
  heat += speed;
  if (currentTime - lastStrikeSoundTime > 80) {
    playStrikeSound(speed); // Play strike sound
    lastStrikeSoundTime = currentTime;
  }
  if (heat > IGNITION_HEAT) {
    ignite(); // Ignite the match
  }
}

This JavaScript snippet illustrates the core interaction logic, where fast mouse or touch movements (speed > MINSPEEDTHRESHOLD) over the match accumulate "heat," triggering a strike sound and eventually calling ignite() when enough heat is generated.

A significant feature is the use of the Web Audio API to generate all sound effects programmatically, rather than using pre-recorded audio files. Functions like playStrikeSound, playIgniteSound, and playHissSound create dynamic sounds using oscillators, white noise buffers, filters (bandpass, lowpass, highpass), and gain nodes, providing a highly responsive and realistic audio experience for striking, burning, and extinguishing the match.

function playStrikeSound(intensity) {
  initAudio();
  if (!audioCtx) return;
  const bufferSize = audioCtx.sampleRate * 0.05;
  const buffer = audioCtx.createBuffer(1, bufferSize, audioCtx.sampleRate);
  const data = buffer.getChannelData(0);
  for (let i = 0; i < bufferSize; i++) {
    data[i] = Math.random() * 2 - 1; // Generate white noise
  }
  const noiseSource = audioCtx.createBufferSource();
  noiseSource.buffer = buffer;
  const filter = audioCtx.createBiquadFilter();
  filter.type = 'bandpass';
  filter.frequency.value = 800 + (Math.min(intensity, 5) * 400); // Adjust frequency based on intensity
  // ... connect nodes and play ...
}

This function demonstrates the use of the Web Audio API to programmatically generate a "strike" sound by creating white noise, applying a bandpass filter whose frequency changes with the strike intensity, and then playing it.