Portfolio / Websites
Horoscope site concept
A scroll-driven concept for Acharya Life: three ancient zodiac systems argue their way down the page, then lock onto the birthdate you enter — every angle computed in the page, nothing painted.
Built and run by Joel Wickremasinghe
design concept — built, not deployed as a product
24.2°
the real Lahiri ayanamsa between the tropical and sidereal rings — computed from the entered date, not hard-coded
architecture · page.js
Problem
What needed to exist
Acharya Life's live site is a content platform: it reads well, but it does not show what makes the product interesting, which is that three traditions read the same birthdate and disagree. A conventional horoscope page hides that argument behind tabs.
The brief asked for a page that feels like a hand-drawn astronomical chart that turns out to be accurate — ancient, ornate, precise, alive — with a loud open, a quiet scholarly centre, and a loud close where the visitor operates the instrument rather than reads about it.
What we built
The system
A five-act scroll page in the 'live surface' grammar: a pinned instrument already running as you arrive, a flowing act that shows one date read three ways, a pinned act that pulls the rings apart and counts the 24.2° gap, a deliberately still reference act, and a peak where the CTA is an actual date input resolved in place. Five acts across roughly 10.4 viewport-heights, alternating pin / flow / pin / flow / pin, with zero scroll-scrubbed video.
The signature move is the ayanamsa ring: three concentric SVG zodiac rings, one per tradition, sharing a centre. They rotate independently as the page is operated, and the Vedic ring sits at the true Lahiri offset from the tropical one, computed per date. Sun longitude, sidereal rashi and the Chinese lunar year are all calculated in the page; where the arithmetic is an approximation, the page says so on its face.
The 16-second 1920×1080 sky loop from the live header is reused, but its playhead is driven by the date the visitor enters, not by scroll. The 15 illustrated medallions, the Vedic ram and the Chinese dragon are the brand's own assets. Nothing was generated and no API key was spent.
Live surface
The thing itself, running
captured 7 September 2026live website
sennable.com/concepts/acharya-life
The concept itself, hosted here as a static page — scroll it, then enter a birthdate
Links checked 1 August 2026. Screenshots are static captures — the live site is the source of truth.
Architecture
Concept instrument — how the page computes
Stack
Built with
- Static HTML · CSS · vanilla JS
- Bespoke SVG rings
- Scroll-driven acts (pin / flow / reveal / count)
- In-page ephemeris arithmetic
- Playfair Display
- Playwright verification frames
Outcome
Numbers, with provenance
5 acts
across ~10.4 viewport-heights, alternating pin / flow / pin / flow / pin
architecture · BRIEF.md score table
46 KB
of page code — index.html 12 KB, page.js 19 KB, page.css 15 KB — before assets
measured · file sizes on disk
0
scroll-scrubbed video acts; the sky loop is driven by form state instead
architecture · FINGERPRINTS.md
62
verification frames captured in the lab pass — 31 desktop, 31 mobile
measured · lab/shots + lab/mobile folder counts
15 MB
of held brand assets reused as-is: sky loop, 15 medallions, ram, dragon
measured · assets folder size
a concept, not a deployed product — no traffic exists to report
Every figure above is read from the system of record it describes. Gaps are marked, not filled in.
Also in this system
Supporting detail
Why not a continuous camera flight
The brief's energy curve asks for a still, scholarly middle. A single unbroken world cannot go still without becoming a held frame, and its peak is an interaction, not a place. Distinct scenes were chosen for that reason, and the reasoning is written into the brief rather than left as taste.
Authored silence
Act four carries no motion beyond entrance staggers and no state change. It exists so the convergence has something to arrive out of. The verification pass was told to expect it to read as still and not to flag it as a defect.
Feel check, run cold
After the build, each act was scored against the intended feeling. Four of five matched. Act two read as clinical where unsettled curiosity was intended — recorded as a miss in the brief, not smoothed over.
Want a site that behaves like an instrument?
This concept computes every angle it shows and turns its own headline video with the visitor's birthdate. We build scroll-driven pages the same way we build pipelines: real logic, real assets, and a written brief you can hold us to.