Outlined Mega Mark

Full-width mega outlined headline with theme-aware stroke colours; optional hover swaps the outline for an SVG gradient stroke (hollow fill).

UniqueUI CLI

npx uniqueui add outlined-mega-mark

shadcn CLI

npx shadcn@latest add https://uniqueui-platform.vercel.app/r/outlined-mega-mark.json -y

shadcn path expects @/lib/utils (run shadcn init first). Same source file is installed to components/ui/.

Preview

Usage

"use client";
import { OutlinedMegaMark } from "@/components/ui/outlined-mega-mark";

export default function LandingFooter() {
  return (
    <footer className="w-full">
      <OutlinedMegaMark
        fontSize="clamp(7rem, 26vw, 14rem)"
        letterSpacing="-0.02em"
        strokeWidth={1}
        lightStrokeColor="var(--color-neutral-400, #a3a3a3)"
        darkStrokeColor="var(--color-neutral-200, #e5e5e5)"
        gradientOnHover
        outlineGradient={{
          stops: ["#fde68a", "#f97316", "#ec4899"],
          x1: "0%",
          y1: "0%",
          x2: "100%",
          y2: "0%",
        }}
      >
        UniqueUI
      </OutlinedMegaMark>
    </footer>
  );
}

Props

Prop	Type	Description
`children`	`string`	Plain-text label rendered once (accessible); SVG mode duplicates visually inside stroke layers only.
`fontSize`	`string`	Any valid CSS font-size (clamp, rem, px, etc.).
`letterSpacing`	`string`	CSS letter-spacing for the headline.
`lightStrokeColor`	`string`	Outline colour when the page is in light mode.
`darkStrokeColor`	`string`	Outline colour when the page is in dark mode.
`strokeWidth`	`number \| string`	Outline width rendered as SVG/CSS stroke. Numeric values (and `"N"` / `"Npx"` strings) are clamped so the stroke never exceeds 1px; thicker values are capped to a hairline. Other CSS units (`rem`, `em`) pass through and are not clamped.
`fillOnHover`	`boolean`	When true without gradientOnHover, hover fills glyphs with the active stroke colour.
`gradientOnHover`	`boolean`	When true (default), renders two hollow SVG `<text>` strokes: a diagonal idle stroke using your theme accent (`lightStrokeColor` / `darkStrokeColor`) everywhere, plus a `linearGradient` stroke visible only inside a radial spotlight mask driven by pointer position. Idle stroke is clipped under the hotspot so the two strokes never visually stack thicker than 1 device px (`nonScalingStroke`, width capped via `strokeWidth`). When false, `-webkit-text-stroke` markup only.
`outlineGradient`	`OutlinedMegaMarkOutlineGradient`	Vivid hover outline gradient. Shape: `{ stops: string[] /* 2+ CSS colours */, x1?, y1?, x2?, y2? }` — optional line for the SVG linearGradient (`userSpaceOnUse`). Exported from the component module. Overrides `outlineGradientStops`.
`outlineGradientStops`	`readonly string[]`	Shortcut for gradient `stops` only (horizontal default axis). Ignored when `outlineGradient` is set.
`hoverGradient`	`string`	Deprecated: ignored. Use `outlineGradient` or `outlineGradientStops`.
`containerClassName`	`string`	Optional Tailwind classes for the outer wrapper.
`className`	`string`	Optional Tailwind classes on the SVG (gradient mode) or inner paragraph (plain mode).