color-spark

Framework: react

🚀 Color Spark Blink Effect – React Integration Guide

Adds blink animation on live changing values like trading prices and scores.

📥 Import Hook

import { useColorSpark } from "universe-code/react";

⚛️ Step 1 — Use inside React Component

useColorSpark() auto-initializes and auto-cleans.

⚠️ Important rule

must call useColorSpark() in component
data-color-spark goes on value element
same element must contain class:
- back OR lay

tsx

import React, { useState, useEffect } from "react";
import { useColorSpark } from "universe-code/react";

const RealtimePrices = () => {
  useColorSpark();

  const [backPrice, setBackPrice] = useState(20);
  const [layPrice, setLayPrice] = useState(20);

  useEffect(() => {
    const t = setInterval(() => {
      setBackPrice((v) => v + 1);
      setLayPrice((v) => v - 1);
    }, 2000);

    return () => clearInterval(t);
  }, []);

  return (
    <>
      <div className="relative">
        <span data-color-spark className="back">
          {backPrice}
        </span>
      </div>

      <div className="relative">
        <span data-color-spark className="lay">
          {layPrice}
        </span>
      </div>
    </>
  );
};

export default RealtimePrices;

🧩 Minimal Example

tsx

<span data-color-spark className="back">20</span>
<span data-color-spark className="lay">20</span>

2️⃣ Step 2 — Required Global Styles

Add spark color variables in your global stylesheet:

📁 global.css

css

:root {
  /* Customize blink colors */

  --spark-back-bg: #f8e71c;
  --spark-back-border: #f8e71c;

  --spark-lay-bg: #f8e71c;
  --spark-lay-border: #f8e71c;
}

✅ Defaults (auto-fallback)

If not provided, defaults are automatically used:

--spark-back-bg: #f8e71c;
--spark-back-border: #f8e71c;
--spark-lay-bg: #f8e71c;
--spark-lay-border: #f8e71c;

✅ Ideal Use Cases

Crypto stock tickers
Trading dashboards
Real-time score updates
Socket-driven UIs
Currency exchange rates
Gaming leaderboards