Echo Letters

Two offset discs of rounded equaliser bars sit on a diagonal: the lower one pulses in the theme primary inside a dashed orbit, the upper one is a foreground plate with bars cut through it. An italic serif wordmark and a row of small glyphs float on frosted pills across the middle, tracking in from wide letter spacing each loop. Colours come from theme tokens unless you pass them, so it follows light and dark mode and the palette picker. It scales a 1080×1350 stage to fit its parent, pauses off screen and holds a still frame when the user prefers reduced motion.

Installation

CLI

npx @modus-ui/cli add echo-letters

Manual

1. Copy the code from the component tab.
2. Create a file at components/ui/echo-letters.tsx.
3. Paste the code.

Usage

import { EchoLetters } from "@/components/ui/echo-letters";

export default function Example() {
  return (
    <div className="relative h-[500px] w-full">
      <EchoLetters text="Modus UI" />
    </div>
  );
}

Props