Is Bracket Emphasis free for commercial use?

Yes. The repository's MIT with Commons Clause licence permits personal and commercial products, including client websites. Keep the source licence notice. Selling or repackaging the component catalogue itself is excluded; see LICENCE.md for the full terms.

Does animated bracket text work without JavaScript or with reduced motion?

Load entrances use CSS from first paint. Essential copy stays visible with scripts disabled, in view mode before hydration, or when observation is unavailable. Reduced motion shows the final corners immediately; changing the preference or focusing an enclosing control finishes the decoration without stealing focus.

How do I customise the bracket colour, size and reveal?

Use semantic ink, gap, reach and duration CSS tokens at your component's own scope. Inherit typography or pass className, and use trigger=view for below-fold text. Motion's shared entrance helper owns one-shot observation and cleanup; no text is split or reconstructed and no ambient loop runs. Physical-device performance is not certified.

Bracket Emphasis

Four quiet corners around the words that matter.

Form & field / Independent design studio

Make room for deliberate work

We help thoughtful organisations find a clear voice, then give it a useful place in the world.

Explore selected work

Customise

Entrance trigger

Code

<TextBracketEmphasis>
  deliberate work
</TextBracketEmphasis>

Bracket Emphasis is free animated bracket text for React and Next.js. Four annotation corners settle around an intact phrase, keeping its glyphs, selection and accessible content in normal flow.

Use it inside an editorial heading or a compact article pull phrase. The corners enter once on load or in view; reduced motion and keyboard focus finish the decoration in place without hiding copy.

Install

Add the @te registry to your components.json once:

{
  "registries": {
    "@te": "https://templateempire.io/r/{name}.json"
  }
}

Then install the component:

npx shadcn@latest add @te/text-bracket-emphasis

Usage

import { TextBracketEmphasis } from "@/components/text-bracket-emphasis";

export default function Introduction() {
  return (
    <h2 className="text-4xl leading-tight">
      Make room for <TextBracketEmphasis>deliberate work</TextBracketEmphasis>
    </h2>
  );
}

Props

Prop	Type	Default	Description
children	string	required	Intact semantic text, rendered once. Empty text has no corners or observer.
as	ElementType	"span"	Semantic wrapper. Custom components must forward their DOM ref; otherwise decoration stays static.
trigger	"load" \| "view"	"load"	CSS-first entry on load, or one shared leading-edge entrance in view. Completed entrances do not replay after edits.
className	string	undefined	Consumer-owned typography, dimensions and layout merged onto the wrapper.

Customisation

Scope --bracket-emphasis-ink to a semantic colour. --bracket-emphasis-gap reserves inline space; --bracket-emphasis-reach sizes the corner arms. --bracket-emphasis-duration defaults to var(--dur-2, 300ms). The default ink is foreground, gap is 0.25em and reach is 0.35em. Corners bound the entire wrapped block, keeping text visible throughout.

.article-phrase {
  --bracket-emphasis-ink: var(--primary);
  --bracket-emphasis-gap: 0.4em;
  --bracket-emphasis-reach: 0.5em;
  --bracket-emphasis-duration: 450ms;
}

Frequently asked questions

Is Bracket Emphasis free for commercial use?: Yes. The repository's MIT with Commons Clause licence permits personal and commercial products, including client websites. Keep the source licence notice. Selling or repackaging the component catalogue itself is excluded; see LICENCE.md for the full terms.
Does animated bracket text work without JavaScript or with reduced motion?: Load entrances use CSS from first paint. Essential copy stays visible with scripts disabled, in view mode before hydration, or when observation is unavailable. Reduced motion shows the final corners immediately; changing the preference or focusing an enclosing control finishes the decoration without stealing focus.
How do I customise the bracket colour, size and reveal?: Use semantic ink, gap, reach and duration CSS tokens at your component's own scope. Inherit typography or pass className, and use trigger=view for below-fold text. Motion's shared entrance helper owns one-shot observation and cleanup; no text is split or reconstructed and no ambient loop runs. Physical-device performance is not certified.

Related components

Give your words a considered homeExplore complete Next.js templates from Template Empire for the rest of your editorial experience.Explore Template Empire templates