Ember Type

Ember Type is a WebGL text effect for Framer. Your headline burns into view along a noise threshold, with a glowing ember front, drifting sparks and a soft heat halo. Switch to Hover Burn and the cursor scorches through the letters, which heal as soon as it moves on. The text is real text: it uses any Framer font, wraps to the frame, stays readable to screen readers and search engines, and the canvas is transparent, so it sits on any background.

Customizations

• Content: text with line breaks, any Framer font with weight, size, letter spacing, line height and alignment, Fit Width to fill the frame, padding and vertical alignment

• Colors: text color, ember hot and cool colors, background (transparent by default); accepts hex, rgb/rgba and color tokens

• Effect: burn direction (random, bottom, top, left, center), grain size, edge width, glow strength, spark density, flicker speed

• Motion: trigger (On Appear, Loop, Scroll, Hover Burn, Click Toggle), duration, delay, hold time for loops, start hidden for click, burn radius for hover

• Reduced motion: Respect (shows the final text with no animation) or Ignore

• Performance: pauses when off screen, skips empty pixels, caps pixel density at 2x; shows a styled CSS version on the Framer canvas and in static renders

Use cases

• Hero headlines that ignite as the page loads

• Section titles that burn in as visitors scroll

• Interactive wordmarks and taglines that react to the cursor

• Event, music, gaming and launch pages with a warm, cinematic mood

• Click-to-reveal teasers and countdown copy