Magic kit · KCH Jeddah home page · v2 · 3 Oct 2026

Same sections, same words, more premium and interactive

All twelve sections from kch.sa, in the live order, with the live English and Arabic copy, photos, consultants and icons. The magic kit decides how each one moves and answers.

The first five seconds

Any click or key skips the intro. It plays once per visit, and reduced motion gets a 200ms fade.

Section by section

Live section	What it does now	Kit source
Navbar	Turns into a floating glass bar after 60px, hides on the way down and returns on the way up. One pill glides between links. Specialties opens a menu of the 11 centres that grows from its button. The phone menu rises while the page steps back.	navbar, phone-menu
Hero	The King's tile opens into the once-play hospital film (the same film the live hero uses). A play and pause control shows how far the film has played. The film leans toward the pointer and settles back into a card as you scroll.	recipes 1, 2
Quick actions	One glass bar on the hero's edge. Each icon acts out its job: the calendar flips a page, the stethoscope swings, the sparks turn.	hover §5
Not sure where to start	A scan line runs down Dr Kings once when the card enters, and again on hover. The image leans toward the pointer.	recipe 5
Since 1840	A pinned scene: scrolling rolls the year digit by digit and the rail fills from London to the King's tile at Jeddah. Every year is clickable.	scroll, recipe 4
Eleven centres	Drag the row (it glides after you let go). Below it, one pathway line with a stop per centre fills as you move. Icons from KCH's own set turn white to navy on hover.	recipe 4
35 specialties	Hairlines draw in one after another; a navy rule fills over the centre you point at.	entrance
World leadership	The building's hex facade draws itself behind each claim; the four numbers roll like odometers.	recipes 12, 5
Consultants	All 11 chips work with 48 real consultants. A chip deals a new lineup; a card's photo flies into the featured seat.	recipe 2
Extension of London	The tile rises as a 6% watermark; vision and mission icons draw.	premium §2
Why King's	Five calm cards; each icon draws itself as its card arrives.	calm section
Patient experience	The three step cards stack: each settles back and dims as the next slides over it.	scroll
App	The phone rises into the card and leans toward the pointer.	recipe 3
Footer	The full KCH logo drawn as dots: they gather when you scroll to it, part round the cursor and scatter on a click.	footer-logo
Everywhere	One entrance family. A 1px light that finds a card before the pointer arrives. A 150ms press on every control. Arrows run through their circle, and a band of light crosses each button.	motion-system, hover §2

Home, round three: the page hands over

Same twelve sections, same words. Each row is one move from PROMPTS-home.md, built in its own module (home-*.js, home-*.css) on app.js's hooks. STORYBOARD-home-consultants.html holds the consultants storyboard and the pick.

Live section	What it does now	Kit source
Hero to Dr Kings	As you scroll, the film settles back under the headline, then keeps shrinking and glides down the page until it is the exact box of the Dr Kings card. Dr Kings wipes over it from the reading side and the copy rises. Scrubbed by the scroll, so it plays backwards on the way up. Desktop only; the film is paused by the time it lands.	round 1B, home-handoff.js
Since 1840	The rail is an arc from London to Jeddah over a dotted map of the facade's hexes (equirectangular, lon -10 to 48, lat 58 to 16). London is a filled hex, Jeddah is the King's tile, the milestones are stops along the arc. A bead of light glides from stop to stop on the year's own 620ms clock with a short beam behind it. The map is drawn once per layout and never mirrored in Arabic.	round 3A, home-arc.js
Eleven centres	"One pathway of care" is one line that enters the first card, passes through every card and leaves the last. A bead runs the line as the row walks; the card it is inside lifts 4px and brightens. One element under the cards and one segment inside each, so it never sits on a word.	round 4B, home-pathway.js
Consultants	Eleven centres on one sliding rail with the roster's head counts and one moving pill. The featured consultant fills a stage edge to edge, framed by the facade's hexes, name set large, quote rising word by word, a filament under the name for the six-second dwell with a text pause. Four portrait plates with the centre's glyph: they lean, the photo drifts against the lean, the name plate slides up to a "View profile" pill. A chip change gathers the plates into a deck and deals the new four, 60ms apart, within 900ms. Clicking a plate flies its portrait up into the stage while the outgoing portrait flies down into the empty seat.	round 6A + storyboard, app.js, docs-home.js, home-docs.css
Extension of London	A lamp on the hem: as the navy section arrives, one beam opens from the curve and reaches down the section; the statement's words finish lighting by the time the heading crosses the middle of the screen. One element, one transition.	round 7, home-calm.js
Why King's	One rounded highlight lives behind the five cards and slides to the card under the pointer or focus in 320ms; that card lifts 2px and its icon performs. On touch the highlight follows the card nearest the middle of the screen.	round 7, home-calm.js
Patient experience to App	As each step card is covered, its STEP tag slips out from under the incoming card and docks into a strip pinned above the stack; a tick folds in and the count rolls. When the app card arrives the strip travels down and lands as the card's eyebrow row. The phone starts tilted 20° and lands flat as the card arrives.	round 8A, home-steps.js
The spine	One line in the gutter from under the hero to the footer's logo, filling with the reader, light on navy and navy on light, with a facade hex lit at each section's heading. Hidden under 1240px.	round 9, home-spine.js
Reduced motion	The hero and the card finished, the arc at rest, the lineup swapping in one frame, no filament, no strip, the phone flat, the spine still.	html.rm and the media query

Round three, filmed (headless Chromium, half scale)

Stills

Doctors page

The five sections of kchj-web's /doctors, in order, with the client-approved copy sheet of 12 July 2026 and all 103 consultants from the roster data.

Live section	What it does now	Kit source
Cover	Three columns of the real consultants' portraits drift slowly. They ease to a stop under the pointer and show each name; a pause control stops them. A click on a face scrolls to that consultant's card, which pulses once.	testimonial columns, recipe 3
Trust strip	"30+" rolls in like an odometer; "Same week" is acted out by a week of seven bars, five of them filled.	recipe 5
Roster	Search highlights the matching words. Cards that stay glide to their new place, the rest fade where they stood, new ones rise. The count rolls. The filter bar turns to glass when it sticks. A to Z groups get a jump bar whose pill follows the letter in view. More filters is a pop-over on desktop and a bottom sheet on phones.	hover §4, micro
Browse by specialty	Team sizes draw as bars. A click sends the specialty's name flying up to the filter bar, and the roster re-deals around it.	recipe 2
Not sure who to see	Each situation row fills from the reading side on hover and its icon acts out its job.	hover §5, §7
Between pages	The first-load curtain is reused: the white sky drops over the page with its hem, the logo holds in the middle, then the next page lifts it away.	loader and page switch
Across pages	The centre chosen on the home page arrives as a filter here; the featured consultant's name links to their card.	go-further

Doctors, round two

This round adds a guided finder, a second view of the roster, compare and booking, and a page for each consultant. Names, years, posts and areas come from the roster data; nothing below is invented.

Piece	What it does now	File
Guided finder	Three taps above the roster: a centre, then language and gender, then your list. Your choices fly up into the filter bar and the roster narrows under you. The last step shows five faces, a rolling count, See them and Start again.	doctors.js
Grid / By centre	A two-way switch beside Sort. The knob slides across and the roster regroups under the centre names, each with its head count.	doctors.js
Wall answers search	Type in the roster search and the cover wall replies. Matching faces keep their colour, take a blue ring and lean toward the middle; the rest turn grey. Clear the search and they glide home.	doctors.js, wall-drift.js
Compare	The + on a card pins that consultant, and the photo arcs down into a tray at the foot of the screen. The tray holds three. Compare opens a sheet from the tray with years, languages, credentials and areas of focus side by side, plus a link to each profile.	actions.js
Booking hand-over	Book grows from its button into a navy card with the consultant's photo, name and centre. A bar fills, then the patient portal opens. With reduced motion you go straight to the portal.	actions.js
Profile page	doctor.html gives each consultant a page: the photo over the hex facade, name and role, years, languages, credentials, then Book, Call Centre, compare and share. The All consultants pill takes you back to the roster.	doctor.js
Profile bar	Past the hero, a bar with the consultant's face and name takes the site nav's place. Its pill follows the section you read: About, Focus, Career, Expertise, More. Over the navy career scene the bar turns dark, and it turns light again on the cream.	doctor.js
Career journey	A pinned navy scene. Each scroll step brings the next post: the year rolls digit by digit, the text swaps, and the rail fills to the next stop. A click on a stop jumps there. Dr May Abu Ateeg's runs from 1984 to 1993 in four posts.	doctor.js
Expertise cloud	The areas gather into place as the section arrives, and the count rolls on the same clock. Dr May Abu Ateeg lists ten.	doctor.js
Meet Dr. X	Nine consultants have an introduction film. A Meet button on the photo shows its length and a ring for how much you have watched. A click grows the photo into the player. Close it and the ring keeps your place for next time.	intro.js
Phone filter bar	At 390px the bar takes two rows: search on top, then specialty, filters, sort and the view switch as icons. It sticks to the top as you scroll the roster, in English and Arabic.	doctors.css

Finder, three taps

Roster stills

Consultant profile

Checked

• 1440×900 and 390×844, English and Arabic: no horizontal scroll, no script errors.
• Reduced motion: no intro flight, no film autoplay, finished states everywhere, stacked cards unpinned.
• Escape closes the menus and returns focus; dropdowns open from the keyboard.
• Round two: 17 fresh captures from headless Chromium at 1440×900 and 390×844, English and Arabic, with no script errors on doctors.html or doctor.html.

Not checked

• Real phones, Safari and Firefox. All captures came from headless Chromium.
• Frame rate on a mid-range phone with the 12MB film, the dot logo and the stacked cards.
• Arabic I wrote where the live site's text comes from the CMS (footer labels, socials, a few menu items). It needs a pass with the KCH Arabic writer.
• The Nationality filter on the live roster reads a field that only the CMS holds; the local roster data has no nationality, so this lab shows Language and Gender only. Languages in the local data are English and Arabic.
• One consultant (Dr. Noor Basendowah) has no photo in the source; the card shows her initials. One Paediatrics consultant's photo in the source is the King's tile.
• Two centre photos (Surgery, Dentistry) come from KCH's specialty pages, not from the live carousel, which loads from the CMS.
• Screen-reader output for the rolling year and odometers.
• Round two: the introduction films on a real phone, and the compare sheet with a screen reader.

Your call

Say what to push further or pull back, section by section. When it's right, the next step is moving it into the Next.js site (kchj-web).