Iqra International School — a scroll-told story site for an early-years school
We designed and shipped iqrainternationalschoolsystem.com in a single week — a one-page, scroll-told story site for a Playgroup-to-Class-4 school. Four scenes carry a parent from a seed in the soil to a child who can lead a class, then hand them a campus-visit form. Fully structured for search, with School and Course schema on the page.
The brief
An early-years school whose whole case is atmosphere — gardens, ratios and faith — needed a site a parent could feel, not skim. One week, one page, four scenes.
Iqra International School sells something a brochure page cannot carry: atmosphere. Six acres of garden, twelve children to a teacher, Qur'an and phonics taught side by side, and a walk to the masjid built into the school day. Put that on a standard template and it collapses into a features list that reads like every other school in the city. The site had to make a parent feel the campus before they ever visit it — and it had to be live in a week, before the September intake closed.
The build
We built the whole school as one continuous page, told in four scenes. Scene one plants a seed; scene two brings letters onto the wooden table; scene three walks to the masjid at sunset; scene four shows the sapling grown. GSAP ScrollTrigger scrubs each scene against the scroll position, an IntersectionObserver staggers every card in, and the headline numbers — 420+ learners, twenty to a class, 1,800+ trees planted — count up as they enter view. The four programme stages, campus gallery, parent voices, open-house dates and a validated campus-visit form all sit under the same URL, so a parent never loses the thread. Motion is a layer, not a dependency: reduced-motion preferences are honoured, off-screen particle work is paused to save battery, and if GSAP fails to load the page still reveals and reads correctly. On the SEO side the page ships a full head — canonical, robots, Open Graph, Twitter card — plus JSON-LD School markup with an OfferCatalog describing all four programmes as Course entries.
Architecture
One page, four scenes.
A single static document, a motion layer scrubbed against the scroll, and a complete SEO head — no CMS to slow the first paint and nothing to keep patched.
Build timeline
One week. Four sprints.
Story + direction
Mapped the four scenes and set the type, colour and photography direction.
The scenes
Hero, learning, the walk to the masjid and the grown tree — built and scrubbed.
Programmes + campus
Four programme stages, campus gallery, parent voices and the dates board.
Admissions, SEO + QA
Campus-visit form, structured data, reduced-motion pass and go-live.
Results · at launch
By the numbers.
Tech we used
A small stack.
More build work.
All case studies →
Trusted by teams like yours
The service behind this project
Need the same work?
Web Development for Karachi
A web development company for Karachi trading, distribution and logistics businesses, run from an Islamabad studio. No fabricated local…
Web Development in Pakistan
An Islamabad-based web development company in Pakistan building sites, stores, apps and internal systems. 110+ projects delivered, full…
Custom Software Development for US Operators
Custom software development USA operators can maintain after we leave: booking platforms, CRMs and portals. Seven published builds…