HyperText

Guidelines#

Use it for short technical labels and hero words where a "decoding" feel fits: a status, a product name, a counter label. One or two per screen.

What you provide: text (required; keep it short), duration (ms for the whole reveal, default 800), className (applied to every letter: size, weight, colour), animateOnLoad (default true), framerProps (Framer Motion variants per letter; default fades in from 10px above and exits 3px down).

Anatomy: a flex row with 8px vertical padding and overflow-hidden; each letter is a font-mono span, always rendered uppercase; spaces become 12px (w-3) gaps.

Behaviour: an interval of duration / (text.length × 10) ms advances the reveal a tenth of a letter per tick; unrevealed letters show random A–Z. Hovering the row plays it again. It does not check reduced motion; pass animateOnLoad={false} when the user asks for less motion.

Don't use it for sentences, for text the user must read immediately, or for lowercase copy (it is forced to uppercase).

Facts#

Group	Motion
Product	Crew OS
Global	window.DigitalCrew.HyperText
Source	digitalcrew-orchestrator: components/ui/hyper-text.tsx
Import in the app	import { HyperText } from "@/components/ui/hyper-text";

API#

TypeScript declarations emitted from components/ui/hyper-text.tsx.

interface HyperTextProps {
    text: string;
    duration?: number;
    framerProps?: Variants;
    className?: string;
    animateOnLoad?: boolean;
}
export declare function HyperText({ text, duration, framerProps, className, animateOnLoad, }: HyperTextProps): JSX.Element;

Example#

The code of the preview above: plain React.createElement against window.DigitalCrew, with realistic data.

<div id="root" class="p-6"></div>
<script>
(function () {
  var h = React.createElement, DC = window.DigitalCrew, I = DC.Icons;
  function App() {
    return h("div", { className: "grid gap-1" },
      h(DC.HyperText, { text: "Digital workers", className: "text-4xl font-bold" }),
      h(DC.HyperText, { text: "Online 24/7", duration: 1200, className: "text-muted-foreground text-sm" }));
  }
  ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>

More in Motion#