Skip to main content
Deno 2 is finally here πŸŽ‰οΈ
Learn more

πŸ¦• Text Glitch

deno.land LICENSE tag

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! πŸ¦•πŸ¦•πŸ¦•

πŸ¦• TODO

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