01 · Overview
Momentum, not guesswork
Bootcamp marketing runs on two things: a salary figure and a stock photograph of somebody delighted by a laptop. Brightloop's actual product is structure — live cohorts, industry mentors, portfolio-first projects, six months, while you keep your day job. Structure is the thing to show, and a photograph cannot show it.
So the page has no photography at all. Thirteen inline SVGs carry the entire visual system, and the proof points are instruments: progress rings that fill, bars that grow, numbers that count. All of them run off the same scroll variable and the same observer, so the page measures itself without measuring the frame budget.
02 · The idea
Instruments, not illustrations
On the live page, every instrument fills from one custom property written once per frame while its section is on screen. Three rings, three bars, one write. The figures below are concept content, built to test the animated-instrument pattern against numbers of a plausible shape — not statistics from a real cohort.
91%
Placement rate, for this concept.
4.9/5
Fictional alumni rating.
310
Fictional hiring-partner count.
03 · Goals
What the page had to do
Explain a loop, not a lecture hall
The curriculum is iterative, so it is presented as a tabbed loop rather than a linear week-by-week table.
Six programmes, one outcome
Data, design and engineering tracks that all resolve to the same promise, without six near-identical landing pages.
Price honestly
Pay monthly, only while you study — stated as a headline rather than buried behind a form.
Prove it with numbers that behave
Every statistic animates once, from one shared pipeline, and prints instantly under reduced motion.
04 · Build order
Twelve modules, one pipeline
Tokens and the shadow scale
Twenty custom properties. Navy, cobalt, coral, amber, a tint, a hairline — plus a three-tier shadow scale that does all the elevation work.
The animate-when-seen pipeline
The keystone: one observer feeds rings, bars and count-ups. Three effects, one registration point, one place to fix a bug.
The SVG instruments
Rings built on
pathLength="100", so the maths is percentages rather than circumference — no radius arithmetic anywhere.The curriculum tabs
Three panels, roving tabindex, correct
aria-selected, and the panel content in the markup rather than fetched.Depth parallax
Hero mock cards drift at coefficients declared in
data-depthattributes, so the effect is authored in the markup rather than hard-coded.
05 · Architecture
Three files
├── index.html 48.6 KB — 8 sections, 13 inline SVG, 0 images
├── styles.css 42.1 KB — 20 custom properties, 4 media queries
└── script.js 20.3 KB — 653 lines, 12 numbered modules
The stack
- Inline SVG
- pathLength
- IntersectionObserver
- data-depth
- Sora
- Public Sans
Accessibility
- Roving tabindex
- aria-selected
- SVG role + label
- aria-live
- Reduced motion
06 · What fought back
What fought back
SVG progress rings normally need the circumference computed from the radius, which puts a magic number in the CSS that breaks the moment the geometry changes.
pathLength="100" redefines the path's length as 100 units, so stroke-dasharray and stroke-dashoffset are literally percentages. The ring can be any size; the maths never changes.
Rings, bars and count-ups are three effects that all mean "start when visible". Three observers is three places for the same bug to hide.
One observer, one registration attribute, three renderers. Adding a fourth instrument later is a renderer, not another observer — and the reduced-motion path is written once.
A decorative SVG chart is invisible to a screen reader, and an animating number inside one is worse than invisible.
Every instrument carries role="img" and an aria-label stating the final value in words, and the animated figure beside it is not in a live region. The value is announced once, correctly, whatever the motion setting.
Hero parallax with per-element coefficients in JavaScript means editing the script to move a card — the design lives in the wrong file.
Each card declares its own data-depth. The script reads it; the composition stays in the markup where a designer can change it.
07 · Worth keeping
The parts worth keeping
Three moves from stuck to hired
The whole proposition in one row, before any pricing or programme detail.
A loop, not a lecture hall
The curriculum tabs, which make an iterative structure legible without a diagram.
Taught by people who hire
Mentors introduced by the roles they recruit for — the single most persuasive block on the page.
Only while you study
Monthly pricing that stops when the course does, said plainly in the heading.
The Data track
Analytics, SQL and the statistics needed to defend a conclusion in a meeting. The portfolio project is a real dataset with a real stakeholder question attached, because that is what the interview will actually be about.
- SQL
- Python
- Dashboards
- Experiment design
The Design track
Product design from research through to a shipped interface, taught by people who hire designers. The deliverable is a case study, which is the artefact the job market actually reads.
- Research
- Systems
- Prototyping
- Case studies
The Engineering track
Front-end and back-end fundamentals with an explicit bias towards shipping. Four projects deployed to a public URL beat twelve tutorials completed in a sandbox.
- JavaScript
- APIs
- Testing
- Deployment
08 · Run it live
Run it here
The real build, embedded and running. It loads on demand — nothing is fetched until you ask for it.
Skip the live preview
The real build, running in the page. The live preview is an embedded page; press Escape to leave it.
Open full screen ↗
