Outline Echo React Component

LIVE PREVIEWInteract with the component

Just React. No extra dependencies.

Copy the component and its CSS module into your project.

CSS Modules

Usage

Matches your current playground settings.

import OutlineEcho from "./OutlineEcho";

export default function Example() {
  return (
    <OutlineEcho
      text={"AFTER\nHOURS"}
      color={"#f2e3d2"}
      outlineColor={"#bc8061"}
      layers={5}
      distance={7}
      style={{
        "fontSize": 65
      }}
    />
  );
}

Using Outline Echo

Use a short headline with space around it for the outlined copies. layers controls the number of echoes and distance controls their separation.

Use active to synchronise the expansion with another interaction. Keep the solid face readable independently of the decorative outlines.

Props

Name	Type	Required	Default	Description
text	string	No	""	Display text, including line breaks.
color	string	No	"#e8d9f4"	Front face colour.
outlineColor	string	No	"#9d76b5"	Outlined echo colour.
layers	number	No	5	Number of outlined copies, clamped between one and ten.
distance	number	No	7	Layer displacement in pixels.
active	boolean	No	undefined	Optional controlled expansion state; otherwise hover or keyboard focus shifts the echoes.
className	string	No	""	Additional CSS classes merged with the component styles.
style	CSSProperties	No	undefined	Inline styles for sizing, typography, and visual overrides.