Reflection Text 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 ReflectionText from "./ReflectionText";

export default function Example() {
  return (
    <ReflectionText
      text={"Still waters."}
      color={"#d9d2df"}
      reflectionOpacity={0.3}
      distance={8}
    />
  );
}

Using Reflection Text

Use a short headline through text and set font size or weight with style. The reflection occupies normal layout space beneath the text.

The mirrored copy is decorative and hidden from assistive technology. Lower reflectionOpacity on light surfaces and adjust distance to separate the two baselines.

Props

Name	Type	Required	Default	Description
text	string	No	""	Text to display and reflect.
color	string	No	"#d9d2df"	Text and reflection colour.
reflectionOpacity	number	No	0.3	Reflected text opacity from zero to one.
distance	number	No	8	Space between the original text and reflection in pixels.
className	string	No	""	Additional classes on the root element.
style	CSSProperties	No	undefined	Inline styles for sizing, typography and appearance.