Magic round · KCH Jeddah home page · 3 Oct 2026
Home page uplift: one page, two hero directions
Built with the magic and magic-qaider skills, on KCH's own logo file, building photo, V3 tokens and the live EN and AR copy.
Recommendation: Hero A, the tile that opens.
It shows the real hospital in the first two seconds. The King's tile turns into the window and then rests in its corner, where the same sign stands at the real entrance. Hero B is the more original idea. It costs a photo of the place, and a hospital visitor wants to see where they will go.
The brief, read back
Uplift kch.sa's home page with the magic kit so it feels premium and interactive. I read "premium" as fewer, larger things, set in the brand's own navy, with one considered move per section. I read "interactive" as every control answering the hand within 150 to 300ms, and each section having one big move. Locked: the logo, the navy palette, the bilingual copy, the real photos and the consultants.
What is wrong today
- The hero heading sits small at the foot of a dim photo, and the cookie bar covers it.
- The page says specialties twice: a carousel of 11 centres, then an index of 35 specialties.
- Several sections stay blank until a script reveals them. A full-page capture shows empty navy blocks.
- The numbers sit still; nothing on the page acts out its claim.
- The page runs 11,200px across 12 sections. Five "Why King's" cards repeat the vision copy.
- "Not sure where to start" and the specialty index live apart, so a worried visitor reads two sections before reaching a centre.
The two hero directions
Direction A · a surface that becomes something
The King's tile opens into a window onto the Jeddah hospital, then rests in the window's corner like the sign at the real entrance.
Recipes: 1 (take the mark apart: the tile is a door), 2 (it turns into something: the tile becomes the frame), 12 (the local detail: the sign at the entrance), 13 (the photo leans a few pixels toward the pointer).
Took: the clip-path window from Qaider's page switch. Changed: it opens through the tile, once, and lands on the building.
Does not fix: the hero still holds a photograph, and the opening plays only once per load.
Direction B · a gather
The hospital's hex façade, built in code, fills from the entrance upward like the real wall. Hexes light toward the pointer.
Recipes: 12 (the local detail: the façade itself), 4 (the headline made literal: "in the heart of Jeddah" becomes the building's own skin), 13 (free interaction).
Took: the dot-gather from Qaider's footer. Changed: its unit is the façade hex, and it fills by the building's own gradient.
Does not fix: no photo of the place. On phones the wall moves above the heading and gives up its pointer reply.
Both directions in Arabic, right to left. The tile stays unmirrored.
A third direction, held back: the logo's vertical "King's" rises like the building and becomes the navbar logo on scroll. It repeats the move A already owns.
The rest of the page: one idea per section
| Section | Its one move | Recipe |
|---|
| Find care | Three live sections merged into one. Pick a symptom or type one; a route line draws from the question to the right centre, which opens with its specialty marked. | 10, 4 |
| Since 1840 | A pinned scene. Scrolling rolls the year digit by digit from 1840 to 2025; the rail fills from London and ends on the King's tile. | 5, 11 |
| World leadership | Calm cards. The four numbers roll like odometers while a row of marks fills to scale (one mark = 10). | 5 |
| Consultants | A centre chip or a card sends that consultant's photo flying into the featured seat. A shared pill slides between chips. | 2 |
| Who we are | Vision and mission, then the five principles as rows that open in place. Five cards shrink to five lines. | calm |
| Patient journey | Each step leaves something on one visit card: booked, then the fasting, medication and parking ticks, then the app. | 11, 3 |
| Closing card | The King's tile drawn as dots from the real logo file. The dots gather on view, part around the cursor and scatter on a click. | 1, 13 |
Shared across the page: one entrance (heading words rise from behind an edge at 45ms steps, content rises 16px), a 150ms press on every control, arrows that run through their circle, and a navbar that hides on the way down.
Checked
- 1440×900 and 390×844, English and Arabic: no horizontal scroll, no script errors.
- Reduced motion: transitions drop to 200ms fades, and the tile, façade and dots show their finished state.
- Every heading sits in the HTML at first paint. Without script, the content shows.
Not checked
- Real phones, Safari and Firefox. All captures came from headless Chromium.
- Peer research. I did not measure 20 real hospital home pages. This round leaned on the live-site audit and the kit's stored surveys.
- The symptom routes. The six example routes need clinical sign-off before they go live; the real checker stays Dr Kings.
- Arabic microcopy I added (address line, visit-card labels, "Try"). It needs a pass with the KCH Arabic writer.
- Keyboard order through the pinned 1840 scene, and screen-reader output for the rolling digits.
Your call
A, B, a merge of named parts, or neither, in your own words. After that: promote the pick into the Next.js site (kchj-web), or run a second round on any section above.
