ELA homepage, round 6: Fable against Opus

Page load, desktop, 0 to 3.6 s

Page load, phone

The ending

• Founder 8.5. Ship it: this is the first variant where every binding rule and every 30 Sep note is met in the code and the strips, and the page sells relief without a hint of dread; the two things I'd change are my own call on the watch rest frame and the hero price cue.
• Conversion 8.5. Ship it: the fold, the honest single action, the measured jump landings and the safe demo are the strongest conversion build of the series, with the watch's idle frame and the desktop completion cue the only remaining 'make me think' moments.
• Craft 8. The typography, the ink-matched guide dot on the film's own springs, and the receipt-like membership ledger make this the first round-6 page that feels made rather than assembled, and it would ship once the empty fold quadrant at rest, the mismatched resting watch frame and the two leaking crops are fixed.

• Founder amendment to ruling 5, one line: rest the hero watch on assets/watch/ready.png (PROTECTED, Hold to arm) and paint w000 from pointerdown; keep the w000..w120 scrub and the w120 rest state exactly as they are.
• Hero price cue: my decision is to drop .pricecue from the hero. The ledger in Membership is where prices live; the hero keeps Get the app, Available on iPhone and Apple Watch, and the phone-locked line.
• Verify the See the countdown landing at 1440x900 and 390x844 in a real browser: the code's scroll-margin maths (nav minus 26 px on desktop, minus 12 px on mobile, against the story's own top padding) looks right, but the rule is checked, not reasoned.
• Put the watch idle frame to the founder as a one-line decision: at rest show assets/watch/ready.png ('PROTECTED, Hold to arm') and switch to w000 on pointerdown, so both devices show the settled state before a press; if ruling 5 stands, nothing else changes.
• On desktop, bridge the completion: keep the hint slot beside the disc alive for a beat with 'That's the hold.' (or a short arrowed cue toward the result) before it fades, so the frozen 'KEEP HOLDING 1' frame is not the last thing the eye sees; alternatively rest on a frame that reads as complete.
• Fill the desktop hero column at rest: either a quiet one-line cue in the result slot ('Try it: press and hold the disc.') that the result replaces in place, or reduce --phone-w so the law-9 line and the phone bottom align within ~60px at 1440x900.
• Show 'Example timeline. Timings vary by case.' only while the case loop (beat 1) is the active layer; hide it on the countdown still and the map beat.
• Restore 'How it works' to the phone nav at ≤600px (drop the subtitle, shorten to 'How it works' + 'Membership', or move Membership to a second line) so the mobile trunk test offers the two questions a first visit asks.
• Fill the reserved result slot at rest without moving a word above it: move the 'Demo with the real app. Nothing is sent from this page.' caption and a quiet 'Try it: press and hold the disc' line into the slot under the law-9 rule, and let the result replace them in place on completion (same box, cross-fade). Check the 1440x900 fold shows no empty quadrant.
• Resolve the watch's resting state with the founder: the file already notes the one-line swap to assets/watch/ready.png at rest with w000 painted from pointerdown. Put the question in the hand-off explicitly with the two fold shots side by side, since ruling 5 as written produces a mid-press frame beside a settled phone.
• Mobile 'We take it from here' crop: raise --k on .crop.fade (or move the mask's start) so the fade begins in the gap below 'ELA response team' and no row dissolves mid-line; in the wrist card, set the second watch's negative margin so the card edge cuts the band, not the case.
• Tighten the close: start the stem spring when the head spring passes ~0.9 instead of at 400ms, end the morph tick when both springs are settled (|v|<0.06) instead of at a fixed 1000ms, and fade immediately so the whole becoming-the-keyhole reads in ~0.9s; gate the pending hop in landed() on the settled test rather than first arrival so no hop starts before the tiny settle finishes.
• Give the story's sticky column something to hold at 1440 before the map beat: either narrow the grid (minmax(0,520px) minmax(0,420px) with the phone centred) or let the countdown and case phones sit on the same soft radial wash the hero uses, so the column stops reading as leftover canvas.

Page load, desktop, 0 to 3.6 s

Page load, phone

The ending

• Founder 8.5. This is the first variant I would ship: the brand system, the copy laws and every one of my 30 Sep notes are met in the code and on the strips, and the page says 'hold, and you're not on your own' without a trace of dread; trim the doubled legal-fees line and it is done.
• Conversion 8. A clear, honest page that a scanner understands in five seconds on what and who, with correctly engineered jumps and a demo that cannot trap or deceive; it ships, but it should carry the price into the hero and fix the mobile ordering so the response follows the countdown.
• Craft 8. The dot stepping down the real case screen's four timeline nodes as each line lights is the signature moment and it earns its place; around it the type, the ledger and the film-true springs are ship-grade, held back from 8.5 by a flat film block, a loose left lane and a hero pair on two planes.

• Remove the 'Legal fees are agreed between you and the law firm.' sentence from the first response line (the .fee span inside 'A vetted law firm is notified.') so it appears only under the prices, as ruling 9 specifies.
• Add the allowed hero price line under 'Available on iPhone and Apple Watch.' (figure in mono, e.g. 'From AED 24.99 a week, billed through the App Store.') so what, who and roughly-what-it-costs are all answered above the fold on both viewports.
• At max-width:900px reorder the How section so the 'We take it from here' sheet follows the countdown tile immediately, with the watch beat and the dark panel after it (CSS order on .count/.send/.wrist/.gone or move .send into the flow), keeping DOM reading order sensible for screen readers.
• Remove the blank reserved strip on desktop at rest: either show a quiet at-rest line in the result slot (for example move 'Demo with the real app… Nothing is sent from this page.' there) or reduce .demo min-height so nothing reads as dead space, while still guaranteeing the copy never shifts on completion.
• Say 'Legal fees are agreed between you and the law firm.' once: keep it under the prices (the praised placement) and drop the .fee span from the send sheet, or vice versa.
• Unify elevation in the hero: give .device.hold the same drop-shadow(0 16px 20px rgba(16,42,30,.2)) as .hwatch, or remove the watch's shadow, so the pressable pair sits on one plane; then state the rule once (yours-lane objects float, ours-lane screens are flat crops) and check the countdown phone against it.
• Tighten the desktop 'yours' lane: set the wrist beat on the same two-column grid as the countdown beat with the watch at --count-w (240px) and its heading/copy in the right column, reduce .you's gap from 58px to 44px, and let the dark panel's top meet the 'after' row's heading line so the void between watch and panel closes.
• Give the film mount a field: either use poster-c.jpg (the darker 'Everything else is ours now.' frame is retired as copy, so crop or pick a frame without the line) or move the seam so the deeper --page tone covers at least 60 % of the mount's height and raise the 1px ring to rgba(16,42,30,.12); the mount must read as an object against the page in a 1440 fold.
• Let the H1 own the opening: delay the supporting cast by ~300 ms (.r2 .45s, .r3 .55s, .r4 .65s, .stage fade starting at .5s) so the headline is alone until ~0.9 s, keeping the bloom at 1.35 s and the lift at 3.25 s; confirm on a fresh fs-load strip that the 0.5 s frame shows the H1 and nothing else.
• Verify the case-timeline nodes at 2x: the dot (4.2 % of the 290px case frame) must sit exactly on the capture's own status circles for n1–n4 (left 12.61 %, tops 39.79/46.37/52.80/59.27 %) so the moment reads as the real glyph lighting, not a dot covering it; adjust the node size to the glyph's measured diameter.

Page load, desktop, 0 to 3.6 s

Page load, phone

The ending

• Founder 9. This is the first variant that does what the founder asked on 30 Sep without a single copy-law slip; I would ship it, with the keyhole arming tightened and the watch rest frame and ring-tip dot confirmed by him.
• Conversion 8. The clearest conversion path of the round: a scanner knows what ELA is, who it is for and what it costs in one screen on both viewports, every action is real and every jump lands under the bar; fix the five-second dimming of the four lines and give the mobile completion its one explanatory sentence and this ships.
• Craft 7.5. The most carefully crafted ELA page so far, with a film-accurate guide dot, real-pixel art direction and a genuine signature in the dot riding the hold ring, held back from a ship score by a blank-icon flash at the ending, uneven story rhythm on desktop and a text-heavy mobile fold.

• Arm the icon (empty the real keyhole) only when the lift from 'alone.' actually begins, not during the 240 ms dwell on the full stop, so the icon is never a blank tile while the dot is still parked on the text.
• Put the hero watch's rest frame and the ring-tip dot in front of the founder as two explicit yes/no items before launch; both are compliant with the written rulings but both are things he has strong views on.
• In '.four.run li', do not dim unread lines below readable ink: either remove the opacity drop and let the forest marker and '.lit' weight carry the progress, or keep unlit lines at full opacity and only change the marker. Check both the desktop sticky sequence and the mobile '#mCase' sequence, which share '#fourD'.
• On phones (max-width 960), show the result sentence on completion: put 'In the app, the countdown opens now. It sends on its own unless you slide I'm safe.' into '.capnote' beside the phone (or un-hide '.rp' in a compact form) so the visitor learns what the hold did without pressing 'See the countdown'.
• Make the hero price link a 44 px target on phones (padding 10px 0 at 390, or move the link to the words 'One membership' as a 44 px inline-flex), keeping the line's text unchanged.
• Raise with the founder before launch, do not change unilaterally: whether the rest frame for the hero watch can be 'assets/watch/ready.png' (in the kit) instead of w000 so the idle watch does not read 'KEEP HOLDING 0s' beside an idle phone; ruling 5 currently names w000.
• Ending: never show a blank icon. Either keep the icon's keyhole hidden (patch armed) from the moment #appIcon first intersects, so the dot arrives into an already-empty mark, or reverse-morph: as the dot passes u>0.6 of its flight, shrink the real keyhole's head toward the landing point so dot and hole meet instead of hole-vanish-then-dot. Verify in f62-ho-fs-end that no frame between 'alone.' and arrival shows the icon without either a keyhole or the growing head.
• Story column: replace the flat `.beat{min-height:206px}` with per-beat spacing that lets the sticky states have travel without dead air, e.g. min-height only on beats that drive a phone change (data-b 1, 2, 3, 4) and let the wrist beat's gap be taken by the watch's slide-in timing, or balance the wrist and contact beats so their lower gaps match the others within ~12px.
• Mobile hero: move the demo note and the price line below the devices (or fold the price into the 'Available on iPhone and Apple Watch.' line) so at 390x844 the disc and at least the upper half of the phone are above the fold; keep H1, lede, action and law 9 above it.
• Set opsz per rendered size on h2s: opsz 96 only at >=48px, opsz 64 at 36-48px, opsz 48 at <36px (phones), and give the hero H1 at 1440 another step (62-66px, or widen .hero-copy to ~640px) so the headline owns the left half of the fold.
• Hero price line: set the whole figure group in Instrument Sans with tabular numerals and keep mono only in the ledger (if the founder keeps the line), or set the line entirely in mono as a quiet 'server fact' row; the half-and-half texture is the one unresolved typographic choice above the fold.

Page load, desktop, 0 to 3.6 s

Page load, phone

The ending

• Founder 8. Fully on-brand and copy-lawful with every 30 Sep note met in substance; fix the hidden full stop and the keyhole-less icon on load, show the morph in the strip, and I would ship it.
• Conversion 8.5. A scanning UAE resident knows what ELA is, who it is for and roughly what it costs within the fold on both viewports, the action is honest everywhere, the objections arrive in the right order and the jumps land on their headings; ship it once the desktop demo is clearly an invitation and the closing icon stops reading as blank before the dot arrives.
• Craft 7.5. A confident, original editorial ledger with real variable-font craft and the film's motion grammar honoured on the strips; the signature moment (the dot born as the icon's keyhole) earns its place in concept but is undercut by a blank icon and unverified in the evidence, and a one-line init bug hides the headline's full stop, so it is a 7.5 that reaches ship with the three motion fixes.

• Keep the H1's typed full stop visible from the moment the headline rises; let the dot bloom over it and only then clear it (remove the initial 'is-here' in initGuide and rely on the bloom's own 'is-here' at p>=1).
• Do not cover the icon's keyhole on load. Leave the real icon intact and only raise the cover when the dot's flight to the icon starts (move the 'pre' class from initGuide to the go() call for the icon dock), so the icon never reads as a blank tile; then re-run the end filmstrip long enough (3 s or more) to show the head growing, the stem dropping, the colour turning mint and the cross-fade landing on the real keyhole at 2x.
• Confirm with me whether the hero watch should rest on ready.png ('PROTECTED / Hold to arm', the twin of the phone's settled home) instead of w000; if yes, change the one src and the alt.
• Give the desktop demo an explicit invitation: make the hint read as an instruction to the visitor (e.g. 'Try it: press and hold the disc.') or move the 'Demo with the real app.' line up beside the hint so the pressable phone is discoverable in one glance.
• Shorten the chain before the keyhole forms at the close (drop DWELL_CLOSE to ~200ms and let the icon's entrance and the band fire together), or keep a faint keyhole under the cover, so the icon never reads as blank for more than ~1s after it is in view; verify the morph in a filmstrip that runs to at least 3.5s.
• Tighten the countdown row on desktop: align the '"Send help now" sends at once.' block closer to the headline copy (or shrink the row height) so the copy column has no empty band of more than ~60px.
• Confirm with the founder, before launch, the idle watch frame (w000 '0s KEEP HOLDING' vs ready.png) and the 'From AED 24.99 a week' anchor (the weekly plan is the dearest per month; 'From' is honest on sticker price only).
• Keep the headline's typed full stop until the bloom covers it: in initGuide do not add is-here to the home dock; let step() add it when bloomS.p >= 1 (already coded). Re-run the load strips and check the 0.5s and 1.0s frames read 'We send for help.'
• Do not raise the icon's keyhole cover at page init. Add 'pre' only in go() when the target is the icon (the branch is already there), so the keyhole gives way over 0.3s as the dot comes down and is regrown by the morph; the icon never sits blank while the dot dwells on the closing line.
• Extend or re-time the end filmstrip so it covers the dot leaving 'alone.' through the head growing, the stem dropping, the forest to mint colour change and the cross-fade (about 1.9s to 3.4s), and check the overlay's fit against the real keyhole at 2x with khole.dataset.hold set.
• Close the dead band in the countdown row's copy column on desktop: either size the device cut to the copy or move the stand-down sentence down so the two annotations sit at the top rule and the foot with no more than one line-height of air between them.
• Recompose the family map: centre the live pin, drop the zoom to around 115% so the POI clutter thins and the attribution stays whole, and set the watch's foot on the map's bottom edge.