Skip to content
Get Pro
Effects

Smoulder Text

Text that catches where the pointer passes and cools behind it.

$149 once · every Pro piece

Customize

Every glyph carries its own temperature: within 90px of the pointer it heats quickly along the accent ramp, then cools on an exponential half-life, with a little diffusion so the heat smears along each word. The hottest glyphs take a small accent shadow and shed the odd 1–2px spark. The text stays real, selectable and wraps by word; it takes several lines and can be centred as a headline.

Install

npx shadcn@latest add @obsyde/smoulder-text

Needs your licence key · Get Pro

Usage

Import it from where the CLI puts it, or copy the files below by hand.

import { SmoulderText } from '@/components/obsyde/ember/smoulder-text/SmoulderText';

export function Example() {
  return (
    <SmoulderText trigger="pointer" />
  );
}

Files

What you get with Pro: plain React, TypeScript and CSS, with no dependencies.

  • ember/smoulder-text/SmoulderText.tsxcomponent
  • ember/smoulder-text/smoulder-text-demo.cssstyles
  • ember/smoulder-text/smoulder-text.cssstyles
  • ember/smoulder-text/SmoulderTextDemo.tsxdemo
  • ember/effects-kit/kit.tsshared
  • ember/shared/accent.tsshared
  • ember/shared/spring.tsshared
  • ember/shared/ember.cssshared

API

PropTypeDefault
accentAccent'ember' | 'volt' | 'arc''ember'
textTextstring'Handle with care.'
triggerTrigger'pointer' | 'mount''pointer'
alignAlign'start' | 'center''start'
sizeSize (px)number56
weightWeightnumber600
coolingCooling half-life (s)number1.2