A video model was given one picture, the first frame, and made 10 seconds from it. On the page the film plays forwards and back as one loop. Pictures and film generated with AI.
01 · The idea
One idea, one moment, one job.
The idea is what the page is about. The moment is the one thing built for this business alone. The job is what it does for the owner.
The idea
Every position, lit.
The hero is a photograph of three glowing sea creatures in black water, and they move before anyone touches the page: a short AI film, played forwards and back over the still. The brand's line is the page's metaphor: each creature is a position the trader holds.
The one moment
The network
Scroll into the network and light lines draw from creature to creature over a second photograph full of them. Each line is a position, each node carries an example ticker and weight, and the lines pulse the way the creatures do. A photograph of plankton becomes a view of a portfolio.
What it does for the owner
Start the trial
Three plans and one button: start the 14-day trial
A position-size calculator that works from the stop
A prop-challenge rules tracker and a trade journal
A read-only exchange connection, explained step by step
02 · The steps
In the order we did them.
Each step says what we did and why. Open Details under a step for the tools and the numbers behind it.
Write the spec before anything runs
Write out the page, the three pictures and the film, and agree on them before the first call.
Make the hero
Ask an image model for three glowing sea creatures drifting in black water; it is the page's opening picture and the film's first frame.
Details
nanobanana-pro
2K
16:9
Call 01, no reference: three translucent creatures drifting in black water. It is the hero and the first frame of the film.
Edit it into two more pictures
Send that picture back twice, once to fill the water with many of the same creature and once to move in close on the largest one, so all three pictures share one look.
Details
nanobanana-pro
edit
Calls 02 and 03 send picture 01 back as the reference. One fills the water with about 22 of the same creature for the network; one moves in close on the largest bell. The design and the glow hold because both are edits of one picture.
Build the page before the film
Build and check the whole page on the still pictures first, so it already moves before the film exists.
Details
HTML
CSS
SVG
The page was built and audited on the stills alone, the creatures drifting in two layers of the same picture, so it moved before the film existed.
Film the drift
Give Kling, a video model, the first picture and ask for a 10-second film with no sound (the length is a setting you choose), plus a list of what must not appear.
Details
kling-3.0-pro
10 s
first frame
Call 04: picture 01 as the first frame, 10 seconds at 1080p with no sound, and a negative prompt naming what may not appear. Three creatures stayed three and nothing new entered.
Loop it forwards and back
Play the 10-second film forwards, then backwards, so it loops with no visible jump.
Details
H.264
The 241 frames play forwards, then backwards: 480 frames with no jump at the turn, 1,616 KB for laptops and a 979 KB crop for phones. The still paints first and the film takes over.
Draw the network in code
Draw the light lines between the creatures in the page itself, so each line lands on a creature and draws in as you scroll.
Details
SVG
JavaScript
The light lines, the labels and the pulse are drawn in the page over picture 02, so every example position sits on a creature and the lines draw as you scroll.
Make it work with motion off
For visitors who turn motion off, nothing drifts or pulses: the picture stays still and the whole network shows at once.
Details
prefers-reduced-motion
With reduced motion nothing drifts or pulses: the still stays, and the network shows every node at once.
Audit twice, from scratch
Check the page twice from scratch on a phone and a laptop, and fix everything the first check finds.
Details
site walk
Lighthouse
copy_check
The first pass found nine defects and fixed them, among them a layout shift of 0.52 when two sections shared one class. The second, at 375 and 1,280 px: Lighthouse on a phone 97 to 99 for speed, 100 for accessibility, 100 for best practices; layout shift 0; copy_check: pass.
03 · The calls
Every prompt, exactly as sent.
A call is one request to an AI model: the words, plus any pictures sent with them. Each prompt is copied from our records, never retyped, beside what it made. The exact settings sit under each one.
01
Call 01: Three creatures: the hero and the film's first frame
A picture, from words alone
Generated with AI
Made: picture 01The hero, the still that paints before the film, and the film's first frame.
Nano Banana Pro, an image model, made this picture from the words below alone.
The prompt, exactly as sent
Three translucent bioluminescent sea creatures drifting in deep black water, each with a bell shaped like soft layered orchid petals and long, fine trailing tentacles that glow along their whole length. They glow a cool white at their centres fading to pale ice blue at the edges, lighting nothing around them. The largest at upper right, one mid-frame lower, one small at lower right, at different depths so the nearest is slightly larger and sharper. Pure black background, no particles, no seabed, no surface. Macro underwater photography, sharp detail in the petals. No text, no logo, no fish, no people.
The exact settings
tool
generate_image
provider
nanobanana-pro
aspectRatio
16:9
resolution
2k
referenceImageUrls
none
sent
24 Sep 2026, 23:44:16 UTC
prompt length
608 characters
02
Call 02: The network: many of the same creature
A picture, from words and an earlier picture
Generated with AI
Made: picture 02The network section: the light lines are drawn over it.
Nano Banana Pro, an image model, made this picture from the words below and the picture sent with them.
Sent with it: picture 01, three creatures: the hero and the film's first frame.
The prompt, exactly as sent
Edit this photograph. Keep the black water, the glow colour and the creature design exactly as they are. Pull the camera back: many small creatures of the same kind, about twenty, spread across the frame at different depths, their fine tentacles reaching toward one another. Same cool white centres and pale ice-blue edges. No text, no logo, no fish.
The exact settings
tool
generate_image
provider
nanobanana-pro
aspectRatio
16:9
resolution
2k
referenceImageUrls
1 picture
sent
24 Sep 2026, 23:46:48 UTC
prompt length
350 characters
name
L1 hero photograph
kind
product
description
the photograph to edit: the creature design, glow colour and black water to keep exactly
03
Call 03: Close on the largest bell
A picture, from words and an earlier picture
Generated with AI
Made: picture 03The close-up near the end of the page.
Nano Banana Pro, an image model, made this picture from the words below and the picture sent with them.
Sent with it: picture 01, three creatures: the hero and the film's first frame.
The prompt, exactly as sent
Edit this photograph. Move in close on the largest creature's bell until its layered petals fill most of the frame, the fine inner filaments glowing white, the tentacles trailing away out of focus. Same black water, same glow. No text, no logo.
The exact settings
tool
generate_image
provider
nanobanana-pro
aspectRatio
16:9
resolution
2k
referenceImageUrls
1 picture
sent
24 Sep 2026, 23:46:50 UTC
prompt length
244 characters
name
L1 hero photograph
kind
product
description
the photograph to edit: the creature design, glow colour and black water to keep exactly
04
Call 04: The film: the drift
A film
The first frame5 seconds inThe last frame
Generated with AIMade: film 04Played forwards and back behind the opening picture. Three moments from it above.
Kling 3.0 Pro, a video model, made this film from a first frame and the words below.
First frame: picture 01, three creatures: the hero and the film's first frame.
The prompt, exactly as sent
The same three translucent bioluminescent sea creatures from the image, in the same deep black water, with the same orchid-petal bells and the same cool white centres fading to pale ice-blue edges. Nothing is added to the frame and nothing leaves it.
0–10s: the camera glides very slowly forward and a little to the right the whole time, one continuous gentle push, never stopping.
0–10s: each bell pulses on its own slow rhythm: the petals open outward, then contract inward, about one full pulse every 3 seconds; the largest creature at upper right starts contracting, the middle creature starts opening, the small creature at lower right pulses slightly faster than the others.
0–10s: with each contraction the creature rises a short distance, then sinks back a little as the petals open again; the largest drifts slowly up and to the left across the whole take, the middle one drifts slowly up and to the right, the small one drifts slowly upward.
0–10s: the long fine tentacles trail behind every movement with a delay, curving in soft S-shapes as the bells rise, lagging and settling after each pulse, their tips moving last.
0–10s: the glow at each centre brightens as the bell contracts and dims as it opens, a soft breathing light that stays inside the creature and lights nothing around it.
The background stays pure black. Macro underwater photography, sharp detail in the petals, natural slow underwater motion.
What to avoid (the negative prompt), exactly as sent
fish, particles, bubbles, marine snow, seabed, water surface, light rays, text, logo, watermark, people, extra creatures, creatures merging, colour shift to purple or green
The exact settings
tool
generate_video
provider
kling-3.0-pro
duration
10 s
piece
noctiluca
aspectRatio
16:9
resolution
1080p
cfgScale
0.6
generateAudio
false
endImageUrl
none sent
sent
25 Sep 2026, 01:07:05 UTC
prompt length
1,423 characters
negativePrompt length
172 characters
04 · The log and the time
Every call, and how long it took.
The log lists every call, used or not. The times come from the log and our saved versions, and say so where they are estimates.
CALL LOG
NOCTILUCA · ONE LINE PER CALL
01Still · three creaturesused
02Still · the networkused
03Still · the close-upused
04Film · 10 s, first frameused
Calls4
One line per call, in the order they ran. Four made a picture or film the site uses.
Time
3 min
To make the three pictures, on 24 Sep 2026.
Details
The three stills: 23:44 to 23:47 UTC, 24 Sep 2026.
3 min
To make the film, sent the next night once its prompt was agreed.
Details
The film: sent at 01:07 UTC on 25 Sep, after the go on its prompt, and back by 01:10.
4 h 30 min
About that long for the whole build, as we wrote it down at the time. Not timed.
Details
About that long for the build, as written in our register; not timed. The first commit of the page was at 00:12 UTC, before the film.
05 · The honest line
It took more than one prompt.
Four prompts to two models, two of them edits of the first picture. Then the work no prompt does: the page built and audited on the stills before the film, a forwards-and-back loop cut for phone and laptop, the network drawn in code, and two audits.
Optional
The next build sheet, by email.
Every sheet is free and open like this one, whether you sign up or not.
For business owners
A site like this, for your business.
The sites on these sheets are concepts. For a local business we build the real thing: a site that takes the order, the booking or the call.
