Particle Text

Type sampled into a couple of thousand square particles of bone ash.

$149 once · every Pro piece

Customize

Text (| separates strings)

Hold (ms)

Max size (px)

Particles

Reach (px)

Assemble on mount

The pointer pushes them aside like a draught of heat, and each one springs back home with a little overshoot; anything in flight glows along the accent ramp and cools as it lands. Give it several strings and the particles fly to their new homes in reading order, the letters re-forming left to right.

Install

npx shadcn@latest add @obsyde/particle-text

Needs your licence key · Get Pro

Usage

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

import { ParticleText } from '@/components/obsyde/ember/particle-text/ParticleText';

export function Example() {
  return (
    <ParticleText text="Ember" />
  );
}

Files

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

ember/particle-text/ParticleText.tsxcomponent
ember/particle-text/particle-text-demo.cssstyles
ember/particle-text/particle-text.cssstyles
ember/particle-text/ParticleTextDemo.tsxdemo
ember/type-kit/kit.tsshared
ember/shared/accent.tsshared
ember/shared/spring.tsshared
ember/shared/ember.cssshared

API

Prop	Type	Default
`accent`Accent	`'ember' \| 'volt' \| 'arc'`	`'ember'`
`text`Text (\| separates strings)	`string`	`'Ember'`
`interval`Hold (ms)	`number`	`3200`
`size`Max size (px)	`number`	`150`
`count`Particles	`number`	`2200`
`reach`Reach (px)	`number`	`80`
`intro`Assemble on mount	`boolean`	`true`