← All projects

Published Vue package

@fulliron/fluid-text-vue

Make type playful: interactive Smoke, Liquid and Balloon typography for Vue 3, with cursor-driven motion and bouncing text changes.

Open demo npm package

About the project

One typed component, three materials. Letters react to your cursor, push their neighbours and flip into alternate text. Tune surfaces, transitions and Living letters in the playground, export your settings, or enable optional Balloon squeeze sounds.

Three materials, one component

  • Smoke — diffuse trails and airy letter motion.
  • Liquid — elastic displacement and stronger cursor carry.
  • Balloon — inflated 3D panels, neighbour pressure and adjustable recovery.

Install

npm install @fulliron/fluid-text-vue vue three opentype.js

Import FluidText and @fulliron/fluid-text-vue/style.css. Open Settings in the demo, choose a material, and save your parameters with JSON export.

Play with the live demo

Evidence & results

  • Smoke, Liquid and Balloon share a typed Vue and plain-JavaScript API.
  • 72 package tests passed for transitions, lifecycle, settings and stylised physics before release.
  • MIT-licensed package with bundled font notices, live tuning and readable HTML fallback.