Lifestream
A colossal round city raised on a steel plate above a dark wasteland at night, eight reactor towers venting plumes of green energy around a central skyscraper, slum lights glowing beneath.

How it was made

About this demo

Lifestream is an unofficial, non commercial fan field guide, built to show what Claude can make working alongside Canva and Affinity. It is not a Square Enix product.

From prompt to page

  1. 01 Research

    Facts first

    Every claim was checked against official store pages, the official game manual, the PlayStation Blog, Wikipedia and the Final Fantasy Wiki. Each one links to its source where it appears, and nothing was filled in by guesswork.

  2. 02 Canva

    Original art

    15 paintings were generated with Canva AI from written art direction, collected in a Canva art bible design and exported at full resolution. Canva’s background remover lifted the five Materia orbs off their backdrop.

  3. 03 Affinity

    Vector kit

    The pointing hand, the Materia icon and the palette live as vector files, along with a script for Affinity’s built in scripting panel that assembles them into an editable brand sheet.

  4. 04 Build

    A static site

    Pages are plain HTML that work without JavaScript. The rising Lifestream is a small WebGL shader written for this site, and every image is resized and compressed for the screen it lands on.

The art bible

Every scene below was generated in Canva for this demo on October 11, 2026. None of it is game artwork, and no characters are depicted.

  • A colossal round city raised on a steel plate above a dark wasteland at night, eight reactor towers venting plumes of green energy around a central skyscraper, slum lights glowing beneath.
    Home, wide screensPlate city on giant columns seen from the wasteland at night, eight reactors venting green energy.Canva media MAHXwCTI4hA
  • Looking up from the wasteland at a plate city on massive columns, one reactor firing a column of green energy into the night sky.
    Home, tall screensVertical view up at a reactor venting a column of green energy above the plate.Canva media MAHXwFSvwfI
  • A wet industrial street on top of the plate at night, amber street lamps and an elevated rail bridge framing a distant reactor glowing green.
    Midgar, level 1Street level on the upper plate at night with a distant green reactor.Canva media MAHXwDpP4J0
  • The enormous underside of the plate filling the sky, a giant support pillar rising through hanging cables above lantern lit shanty rooftops.
    Midgar, level 2Looking up at the plate underside and central pillar from the slums.Canva media MAHXwPH3rrk
  • Inside a ruined wooden chapel, a single shaft of daylight falls through a hole in the roof onto a small patch of yellow flowers growing through broken floorboards.
    Midgar, level 3Ruined slum chapel with flowers in a shaft of light.Canva media MAHXwIlo9jU
  • A red rock canyon village at dusk built into towering cliffs around a great bonfire, an observatory dome at the top of the spire under a starry violet sky.
    Journey, Cosmo CanyonCanyon village with an eternal bonfire and observatory at dusk.Canva media MAHXwL5ux6Y
  • A glittering amusement park on top of a towering rock above a night desert, a ferris wheel and golden domes lit by fireworks, a cable car climbing toward it.
    Journey, Gold SaucerDesert amusement resort on a towering rock at night.Canva media MAHXwEl1l-s
  • A grey military city on a sea cliff at sunrise, a colossal cannon reaching far out over the water above a small village on the shore.
    Journey, JunonMilitary harbor city with a colossal cannon over the sea at dawn.Canva media MAHXwXZEv4A
  • A quiet mountain village at night ringed by snowy peaks, a wooden water tower in the square and a gloomy mansion on the hill under a cold moon.
    Journey, NibelheimMountain village with a water tower and mansion under moonlight.Canva media MAHXwa51JE4
  • An ancient city of spiral shell shaped buildings in a forest of white trees, glowing pale blue and green beside a still pool.
    Journey, Forgotten CapitalAncient shell shaped city glowing in a white forest.Canva media MAHXwbk4LyM
  • A vast ice crater in a blizzard, rivers of glowing green energy spiraling down into its depths beneath a green aurora.
    Journey and ChronicleIce crater with spiraling green energy under an aurora.Canva media MAHXweeYOr0
  • A winding river of glowing green spirit energy flowing through darkness, scattered with points of light.
    Materia and HomeRiver of luminous green spirit energy in a dark void.Canva media MAHXweTtXrQ
  • A railway line running across golden grasslands toward snowy mountains at dusk, a lone farmhouse beside it and a green aurora rising over the sea.
    Journey, headerRailway across grasslands toward mountains under a rising green aurora.Canva media MAHXwfXAj2Q
  • An empty camp on a hilltop at night, bedrolls and packs arranged around a small fire, a lantern hanging from a spear and a faint green glow on the horizon.
    Party, headerEmpty camp around a fire on a hilltop under the stars.Canva media MAHXwbz3bbM

The living world

The second version of this guide turns every painting into a place you can stand in. Press Explore in the header, or the E key, to step inside one.

  1. 05 Depth

    Paintings with depth

    Each painting was run through Depth Anything V2, an open source depth estimation model, on the build machine. Its depth map turns the flat image into a relief, so when the camera drifts, near rocks slide past far mountains.

  2. 06 Motion

    A world that moves

    A small WebGL2 renderer written for this guide draws drifting fog, billowing Mako, firelight, rain and rippling water, and carries the camera from scene to scene as you scroll.

  3. 07 Stream

    The Lifestream answers

    Points of light follow a current painted for each scene. They swirl around your pointer, scatter when you click, and take on the color of any Materia you set on the bench.

  4. 08 Explore

    Hidden memories

    Explore mode hides 40 short field notes in 13 paintings. Each one restates a fact this guide already sources, with the same links. Progress stays in your browser.

  5. 09 Sound

    Sound from nothing

    Wind, rain, fire, sea and the hum of the reactors are synthesized live with Web Audio. No recordings, music or sounds from any game are used.

Accessibility

  • The moving background can be paused from the header at any time. Explore mode works from the keyboard: Tab reaches every hidden memory, the arrow keys look around and Escape leaves.
  • Every page reads, links and navigates without JavaScript. Menus, spoilers, filters and the destination chooser are native HTML and CSS.
  • Menu windows answer the arrow keys like a game menu, and Escape puts down an orb held on the Materia Bench.
  • Motion stops for anyone who asks their device for reduced motion, and the Lifestream renders one still frame instead.
  • Story spoilers start folded away and open only on request.
  • Sound is off by default and is made in the browser, never streamed.

Rights

Lifestream is an unofficial, non commercial fan project. Final Fantasy VII and every related name are trademarks of Square Enix, which has not made, endorsed or reviewed this site. All artwork here is original, generated with Canva AI for this demo; no game assets, logos or music are used.

Type is set in Cormorant Garamond and Barlow, both released under the SIL Open Font License and served from this site.

Read how this site handles data on the privacy page.

Every source

Official and first party

Press

Reference

Final Fantasy Wiki