Ember Flames: Animated React Footer

•Added on Oct 5, 2026

components/footers/ember-flames/ember-flames-footer.tsx

// JOLOCKY PRO EXCLUSIVE: ember-flames-footer.tsx
// Ember Flames footer root: measures its width and passes the breakpoint, flames and motion settings to the view
// Unlock full multi-file architecture at https://www.jolocky.com/pricing

Pro Component

Source Code is Locked

Get instant access to complete production TypeScript code & CLI commands.

Get All-Access

Ember Flames Footer

ember-flames

Illustrated Scenes Architecture

Built from scratch by Jolocky, with our own layout, color and motion.

Signature Standard

Precision interaction engineering with zero external runtime bloat.

Pro Commercial Access

Production-ready multi-file tree built for modern Next.js and Tailwind CSS.

Engineering Breakdown

Ember Flames Footer — A footer for a studio called Ember, set on near black with a bed of bright orange flames along its top edge. The flames are drawn by code, not by hand: a seeded generator lays out the tongues and then three slightly shaken versions of the shape, so the fire licks and flickers on a 3.4 second loop, while small embers drift up and down above it. A flame shaped character with blinking eyes stands on the fire beside a speech bubble. Under the flames, a full orange panel carries a huge condensed headline, a pill button and an email link, and a giant wordmark is stretched across the dark strip at the bottom. The animation is native SVG, with no script running per frame, and the layout switches between a desktop, tablet and mobile picture by the width of its own container.

Notes on how this item works: its interaction states, motion and responsive layout, written in our own code.

Zero-Primitive Dependency & Pure Standalone Pattern — pure React, scoped CSS and inline SVG. The flames are generated by a small function, the animation is built into SVG, and the only outside request is the two fonts.

Generated Flames — a seeded random generator, so the result is the same on every load, lays flame tongues side by side. Each tongue is a curve through 13 points that leans left or right, has its own height and a slightly different base on each side, and neighbouring tongues are joined by a rounded notch.

Native Flicker — the generator makes the resting shape and two shaken copies, in which every tongue changes height by up to 14% and its tip drifts sideways. An SVG animate element morphs the path through rest, shaken, shaken, rest over 3.4 seconds. There is no JavaScript running per frame.

Floating Embers — a second path holds a handful of teardrop shapes above the flames, and an animateTransform moves it up 10 to 12 units and back over 2.6 seconds. Mobile has no embers.

Character With Blinks — the flame shaped character is a dark body with an orange outline. Its two eyes shrink to a slit between 90% and 95% of a 4 second loop, which reads as a blink. Its feet are drawn after the orange band, so it stands on top of it.

Three Pictures — desktop, tablet and mobile each have their own flame bed, viewBox, band height and character size, chosen by the width of the footer itself: under 640px is mobile and under 1100px is tablet. The speech bubble is left out on mobile.

Stretched Wordmark — the giant wordmark is SVG text with a fixed text length, so it fills the whole width whatever the font does. It is one line on tablet and desktop and two lines on mobile.

Props — animate turns the flames, embers and blinks off, and showMascot removes the character and its bubble. With reduced motion the animation is off as well.

Content Height — the footer has no fixed height and takes it from the picture, the panel and the strip.

Technology Stack

Engineered using established and reliable modern web technologies for peak runtime performance and developer ergonomics.

React

Next.js

TypeScript

Scoped CSS

Inline SVG

Zero Primitive

Last Updated

Oct 5, 2026

Tags & Specifications