Kurra — landing page concepts
8 directions for kurra.app. Each is a separate world: open one, then come back here. Copy and numbers are placeholders unless marked otherwise.
01
Al-Hara
A bilingual magazine about the neighbourhood game: Issue 01, the Hara Issue.
Editorial print-magazine landing page in the Al-Hara Modern system: Lalezar headlines, deep columns, numbered chapters, limestone paper, terracotta accents, hard ink shadows and Najdi crenellation rules drawn in SVG, with a full EN/AR toggle that flips the issue to right-to-left. · Lalezar + IBM Plex Sans Arabic + Chakra Petch · vite, typescript, gsap (core + SplitText), @fontsource
02
Blueprint
The game, drawn to scale. Kurra as an engineering drawing set: a 3D court you can turn, a tactics board for the challenge loop, an exploded Match Room and a site plan for owners.
Technical drawing / 3D. Cyanotype drawing sheets with title blocks, dimension lines, hatching and construction lines; a lazy-loaded three.js axonometric court that switches between a 5-a-side pitch and a padel court and annotates its own dimensions; bilingual EN/AR callouts. · Barlow Condensed + Martian Mono + Noto Kufi Arabic · three (lazy, LineSegments2 fat lines, orthographic camera), gsap + DrawSVGPlugin, vite, @fontsource
03
Floodlights
One night in the city, told in scroll: from 47 unread in the group chat to the floodlights clicking on and the final whistle.
Cinematic scroll story with sticky scenes, scrubbed timelines, a night clock and a match clock driven by scroll, and a page that turns light when the floodlights do · Lalezar + Chakra Petch + IBM Plex Sans Arabic · GSAP 3 + ScrollTrigger, Vite, vanilla TypeScript, inline SVG
04
Hara Lines
Every court is a station. Every squad, a train.
Transit map: the city's courts as a schematic metro network. Sports are coloured lines, squads are trains, a challenge is two lines meeting at an interchange. Scroll rides the line through Discover, Challenge, Match Room, Score and Leaderboard; facility owners get the depot. · Overpass (variable) + Overpass Mono + Noto Kufi Arabic (variable) · vite, typescript, @fontsource-variable/overpass, @fontsource/overpass-mono, @fontsource-variable/noto-kufi-arabic
05
Kickoff Board
Every match tonight. One board.
A split-flap departures board for tonight's matches across the city. The rest of the page keeps the transit-hall language: courts are gates, a booking is a boarding pass, the challenge loop is 'now boarding'. Deep night palette with one signal amber. · Chakra Petch + IBM Plex Sans Arabic · vite, typescript (vanilla, no framework), requestAnimationFrame flap engine, Web Animations API, Web Audio API
06
Match Room
Retire the group chat. Type the game.
Interactive console: the landing page is a live #al-hara channel you can type slash-commands into (/find, /challenge, /split, /score, /arabic, /owner). It answers with rich inline cards, auto-plays a short demo until you take over, and the rest of the page explains Kurra in the same message-and-card language. · Martian Mono (variable, wdth + wght) + Readex Pro (variable, Latin + Arabic) · Vite, TypeScript (vanilla, no runtime libraries), @fontsource-variable/martian-mono, @fontsource-variable/readex-pro
07
Squad Cards
Every squad gets a card.
Bright product-marketing explorer built around collectible holographic squad cards: fanned hand hero with foil tilt and flip-to-stats, playable feature mini-demos, a build-your-card toy, and a sticker-crest K logo that peels on hover. · Lalezar + Rubik (variable, Latin + Arabic) · Vite, TypeScript (vanilla), @fontsource/lalezar, @fontsource-variable/rubik
08
Turf Ops
Run every court from one board.
Serious, operator-grade product page for facility owners in the spirit of dev-tool sites: a raw-WebGL demand-field hero (turf fibres, mowing bands, floodlit grain, a heat-map lattice), then HTML/CSS product renderings of the schedule board, campaign builder, financials and verification, with the player challenge → Match Room loop as the demand engine. · Geist Sans + Geist Mono + Noto Kufi Arabic · vite, raw WebGL (no 3D library), @fontsource/geist-sans, @fontsource/geist-mono, @fontsource/noto-kufi-arabic