src/frontend/shared/MatrixEffect.svelte

<script lang="ts">

  import { onMount, onDestroy } from "svelte";



  /**

   * Props for the MatrixEffect component.

   * @typedef {Object} Props

   * @property {Array<{title: string, name: string}>} credits - List of credits with title and name.

   * @property {number} speed - Animation speed in seconds (default: 20).

   * @property {number} base_font_size - Base font size in em (default: 1.0).

   * @property {string | null} intro_title - Optional intro title.

   * @property {string | null} intro_subtitle - Optional intro subtitle.

   * @property {"stacked" | "two-column"} layout_style - Layout for credits.

   * @property {boolean} title_uppercase - Transform title to uppercase.

   * @property {boolean} name_uppercase - Transform name to uppercase.

   * @property {boolean} section_title_uppercase - Transform section title to uppercase.

   * @property {boolean} swap_font_sizes_on_two_column - Swap title/name font sizes.

   * @property {{path: string | null, url: string | null, ...} | null} scroll_logo_path - Logo to display inside the scroll.

   * @property {string} scroll_logo_height - Height of the scrolling logo.

   */

  export let credits: Props["credits"];

  export let speed: number = 20;

  export let base_font_size: number = 1.0;

  export let intro_title: string | null = null;

  export let intro_subtitle: string | null = null;

  export let layout_style: "stacked" | "two-column" = "stacked";

  export let title_uppercase: boolean = false;

  export let name_uppercase: boolean = false;

  export let section_title_uppercase: boolean = true;

  export let swap_font_sizes_on_two_column: boolean = false;

  export let scroll_logo_path: { url: string | null } | null = null;

  export let scroll_logo_height: string = "120px";



  // Combines intro and credits for display

  $: display_items = (() => {

    const items = [];

    if (intro_title || intro_subtitle) {

      items.push({

        title: intro_title || "",

        name: intro_subtitle || "",

        is_intro: true,

      });

    }

    return [...items, ...credits.map((c) => ({ ...c, is_intro: false }))];

  })();



  // Reactive font size styles

  $: title_style = (is_intro: boolean) =>

    `font-size: ${is_intro ? base_font_size * 1.5 : base_font_size}em;`;

  $: name_style = (is_intro: boolean) =>

    `font-size: ${is_intro ? base_font_size * 0.9 : base_font_size * 0.8}em;`;

  $: section_title_style = `font-size: ${base_font_size * 1.2}em;`;



  // Canvas setup for Matrix effect

  let canvas: HTMLCanvasElement;

  let ctx: CanvasRenderingContext2D;

  let contentElement: HTMLElement | null;

  const fontSize = 16;

  const characters =

    "アァカサタナハマヤャラワガザダバパイィキシチニヒミリヰギジヂビピウゥクスツヌフムユュルグズブヅプエェケセテネヘメレヱゲゼデベペオォコソトノホモヨョロヲゴゾドボポヴッン01";

  let columns: number;

  let drops: number[] = [];

  let animationFrameId: number;



  // Initialize canvas and drops

  function setup() {

    if (!canvas) return;

    const parent = canvas.parentElement;

    if (parent) {

      canvas.width = parent.clientWidth;

      canvas.height = parent.clientHeight;

    }

    ctx = canvas.getContext("2d")!;

    columns = Math.floor(canvas.width / fontSize);

    drops = Array(columns).fill(1);

  }



  // Draw Matrix falling characters

  function drawMatrix() {

    if (!ctx) return;

    ctx.fillStyle = "rgba(0, 0, 0, 0.05)";

    ctx.fillRect(0, 0, canvas.width, canvas.height);

    ctx.fillStyle = "#0F0";

    ctx.font = `${fontSize}px monospace`;

    for (let i = 0; i < drops.length; i++) {

      const text = characters.charAt(

        Math.floor(Math.random() * characters.length)

      );

      ctx.fillText(text, i * fontSize, drops[i] * fontSize);

      if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) {

        drops[i] = 0;

      }

      drops[i]++;

    }

    animationFrameId = requestAnimationFrame(drawMatrix);

  }



  // Reset credits animation

  function resetCreditsAnimation() {

    if (contentElement) {

      contentElement.style.animation = "none";

      void contentElement.offsetHeight; // Trigger reflow

      contentElement.style.animation = "";

    }

  }



  // Setup canvas and animation on mount

  onMount(() => {

    setup();

    drawMatrix();

    resetCreditsAnimation();

    const resizeObserver = new ResizeObserver(() => {

      cancelAnimationFrame(animationFrameId);

      setup();

      drawMatrix();

    });

    if (canvas.parentElement) {

      resizeObserver.observe(canvas.parentElement);

    }

    return () => {

      cancelAnimationFrame(animationFrameId);

      if (canvas.parentElement) {

        resizeObserver.unobserve(canvas.parentElement);

      }

    };

  });



  // Reset animation on prop changes

  $: credits,

    speed,

    intro_title,

    intro_subtitle,

    layout_style,

    resetCreditsAnimation();



  // Cleanup on destroy

  onDestroy(() => {

    contentElement = null;

  });

</script>



<div class="matrix-container">

  <canvas bind:this={canvas}></canvas>

  <div class="credits-scroll-overlay">

    <div

      class="credits-content"

      bind:this={contentElement}

      style="--animation-duration: {speed}s;"

    >

      {#if scroll_logo_path?.url}

        <div class="scroll-logo-container">

          <img src={scroll_logo_path.url} alt="Scrolling Logo" style:height={scroll_logo_height} />

        </div>

      {/if}

      {#each display_items as item}

        <!-- Render Section Title -->

        {#if item.section_title}

          <div

            class="section-title"

            style={section_title_style}

            class:uppercase={section_title_uppercase}

          >

            {item.section_title}

          </div>

          <!-- Render Credit or Intro -->

        {:else if layout_style === "two-column" && !item.is_intro}

          <!-- Two-Column Layout -->

          <div class="credit-two-column">

            <div

              class="title"

              style={swap_font_sizes_on_two_column

                ? name_style(false)

                : title_style(false)}

              class:uppercase={title_uppercase}

            >

              {item.title}

            </div>

            <div

              class="name"

              style={swap_font_sizes_on_two_column

                ? title_style(false)

                : name_style(false)}

              class:uppercase={name_uppercase}

            >

              {item.name}

            </div>

          </div>

        {:else}

          <!-- Stacked Layout -->

          <div class="credit-block" class:intro-block={item.is_intro}>

            <div

              style={title_style(item.is_intro)}

              class="title"

              class:uppercase={title_uppercase && !item.is_intro}

            >

              {item.title}

            </div>

            {#if item.name}

              <div

                style={name_style(item.is_intro)}

                class="name"

                class:uppercase={name_uppercase && !item.is_intro}

              >

                {item.name}

              </div>

            {/if}

          </div>

        {/if}

      {/each}

    </div>

  </div>

</div>



<style>

  /* Container for Matrix effect */

  .matrix-container {

    width: 100%;

    height: 100%;

    position: relative;

    overflow: hidden;

  }

  /* Canvas for falling characters */

  canvas {

    display: block;

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: 1;

  }

  /* Overlay for scrolling credits */

  .credits-scroll-overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: 2;

    color: #fff;

    font-family: monospace;

    text-align: center;

    -webkit-mask-image: linear-gradient(

      transparent,

      black 20%,

      black 80%,

      transparent

    );

    mask-image: linear-gradient(transparent, black 20%, black 80%, transparent);

  }

  /* Scrolling credits container */

  .credits-content {

    position: absolute;

    width: 100%;

    bottom: 0;

    transform: translateY(100%);

    animation: scroll-from-bottom var(--animation-duration) linear infinite;

    padding: 0 2rem;

    box-sizing: border-box;

  }

  @keyframes scroll-from-bottom {

    from {

      transform: translateY(100%);

    }

    to {

      transform: translateY(-100%);

    }

  }

  .uppercase {

    text-transform: uppercase;

  }



  .section-title {

    margin-top: 4rem;

    margin-bottom: 2.5rem;

    font-weight: bold;

    color: #5f5;

    text-shadow: 0 0 8px #0f0;

  }

  /* Intro block spacing */

  .credit-block.intro-block {

    margin-bottom: 5rem;

  }

  /* Credit block spacing */

  .credit-block {

    margin-bottom: 2.5em;

  }

  /* Title styling */

  .title {

    color: #0f0;    

    opacity: 0.8;

  }

  /* Name styling */

  .name {

    font-weight: bold;

    color: #5f5;

    text-shadow: 0 0 5px #0f0;

  }

  .credit-two-column {

    display: flex;

    justify-content: space-between;

    align-items: baseline;

    text-align: left;

    margin: 0.8em auto;

    max-width: 80%;

    gap: 1em;

  }

  .credit-two-column .title {

    flex: 1;

    text-align: right;

    padding-right: 1em;

  }

  .credit-two-column .name {

    flex: 1;

    text-align: left;

    padding-left: 1em;

  }

  .scroll-logo-container {

    text-align: center;

    margin-bottom: 2rem;

  }

  .scroll-logo-container img {

    display: block;

    margin-left: auto;

    margin-right: auto;

    max-width: 80%;

    object-fit: contain;    

    filter: grayscale(1) brightness(0.5) sepia(100%) hue-rotate(50deg) saturate(500%); 

  }

</style>