A neon sign from any text: a bright tube, a soft glow, a dead tube behind it when it is off, and a stutter when it turns on. Set how much it flickers, from steady to badly wired.
Every control here is a view model input in the file. Your app sets the same ones.
Pick your format
Free for your projects, personal or commercial. Don't resell the file itself.
Get the .rivFree. Sent to your inbox, ready to drop in.
How it's built
- 1The tube is a text strokeNo fill, just strokes on the letters: a thin hot core, the tube, then two feathered glows.
- 2A blend state sets the flickerIt mixes a steady pose with an irregular buzz loop by the flicker number.
- 3Turning on stuttersSwitching on plays a short on and off sequence before the light settles.
Use it on your site
import { useRive } from '@rive-app/react-canvas';
export function NeonText() {
const { rive, RiveComponent } = useRive({
src: '/neon-text.riv',
artboard: 'Neon Text',
stateMachines: 'State Machine',
autoplay: true,
autoBind: true,
});
// every input on this page is a view model property
const vm = rive?.viewModelInstance;
if (vm) vm.color('tube').value = 0xFFFF4FB8;
return <RiveComponent style={{ width: '100%', height: 400 }} />;
}Inputs: text, flicker, on, tube, glow. All on the NeonText view model.