ganyariya / text_glitch

🦕 Text Glitch

Glitch Text Library for Deno & React!

🦕 Demo

Sample Aleph Site

Sample Aleph Project (Sample Code)

🦕 Specs

useGlitch

type GlitchOption = {
  updateInterval: number; // (ms)
  mutate: number; // (0.0~1.0) Profability mutaiting for each character
  deleteMutate: number; // (0.0~1.0) Probability deleting for each character
  addMutate: number; // (0.0~1.0) Probability adding for each character
};

useConstruct

type ConstructOption = {
  loop: boolean;
  loopInterval: number; // (ms) waiting time for next effect
  forwardInterval: number; // (ms) moving time to next character
  updateInterval: number; // (ms)
  mutateProbability: number; // (0.0~1.0) Profability mutaiting for each character
  mutateAfterConstructed: boolean; // Even after constructed, mutating?
  mutateAfterProbability: number; // (0.0~1.0) Profability mutaiting for each character after constructed
};

🦕 Extracted Code

function Sample() {
  const [glitchText, setGlitchText] = useGlitch("Text Glitch Library", {
    mutate: 0.2,
  });
  return <div>{glitchText}</div>;
}

🦕 Contribute

🦕🦕🦕 Welcome for your any PRs! 🦕🦕🦕

🦕 Thanks for

use-dencrypt-effect

🦕 TODO

• implement other text effect
• deal with Node.js runtime (compile to js, jsx)