Line Shadow Text

Source: Magic UI ↗
Author: Magic UI
Licence: MIT

Loading…

An italic word casts a hatched shadow whose lines scroll diagonally.

Code

"use client";

import { LineShadowText } from "@/lab/magicui/ui/line-shadow-text";

export default function LineShadowTextDemo() {
  return (
    <div className="@container relative flex h-full w-full items-center justify-center">
      <h1 className="text-[clamp(2.5rem,11cqw,6rem)] leading-none font-semibold tracking-tighter text-balance text-neutral-950">
        Ship
        <LineShadowText className="italic" shadowColor="black">
          Fast
        </LineShadowText>
      </h1>
    </div>
  );
}

Prompt

Build "Line Shadow Text", a text animation. What it does: An italic word casts a hatched shadow whose lines scroll diagonally. Write it as a single self-contained React component in TypeScript that fills its parent (w-full h-full), styled with Tailwind CSS, using motion. Technique: the Motion library. It sits on a light background, in a 16:10 frame. Respect prefers-reduced-motion with a still state, pause work when the element is off screen, and keep it accessible. Original: https://magicui.design/docs/components/line-shadow-text (Magic UI, MIT).