01: The Brief

A landing page for Bhagavad-gita As It Is — the edition translated and commented by Srila Prabhupada. The page had to introduce the book to someone who has never heard of it, defuse the distrust people feel toward "religious literature," and lead to one of three actions: order the printed book, download the e-book, or listen to the audiobook.

"The text is ancient and serious, but the page must not look like a temple website or an esoteric forum."

The core challenge was tone. It needed a calm, editorial, book-like voice that holds attention without pressure.

[ SYS_IMAGE_LOAD ] Hero: background video, serif type, gold accents

02: Structure as a Reader's Journey

The page is built as the sequence of questions a first-time reader asks. Each block resolves one objection and hands off to the next.

1. What is this? — "The Song of God": context and essence in three paragraphs.
2. Who translated it and why it matters — Srila Prabhupada, with numbers: 108 temples, 70+ volumes, 90+ languages.
3. One book for the world's great minds — Emerson, Thoreau, Einstein, Oppenheimer.
4. Eternal questions — who am I, why suffering, what comes after death.
5. Inside the 18 chapters — an overview grouped by "cantos."
6. How to get it — three equal paths.
7. What readers say — real reviews, FAQ, contact.

[ SYS_IMAGE_LOAD ] Prabhupada section: quote, "Live Photo" and stats

03: Visual Language

A dark palette with warm gold accents, serif faces Cormorant Garamond and Playfair Display — a nod to the printed book rather than a web UI. Generous whitespace, large headings, minimal decoration. One focal point per screen.

[ SYS_IMAGE_LOAD ] Overview of 18 chapters by canto

04: Video as Atmosphere, Not Noise

Both video treatments are hand-written on the native <video> element, no libraries.

Hero

The background video plays once and freezes on its final frame. Hovering restarts it. The visitor isn't stuck watching an endless loop, but can "wake" the scene at will.

heroRight.addEventListener('mouseenter', () => {
  heroVid.currentTime = 0;
  heroVid.play();
});

Prabhupada "Live Photo"

Two stacked <video> layers with the same clip. 0.35 s before the active layer ends, the standby layer starts from zero and the two cross-fade on requestAnimationFrame with an ease-in-out curve. The loop closes without a jump.

function xfade(from, to) {
  to.currentTime = 0; to.play();
  const t0 = performance.now();
  (function tick(now) {
    const t = Math.min((now - t0) / XFADE_MS, 1);
    const ease = t < .5 ? 2*t*t : 1 - Math.pow(-2*t + 2, 2) / 2;
    from.style.opacity = String(1 - ease);
    to.style.opacity   = String(ease);
    if (t < 1) requestAnimationFrame(tick);
    else { from.pause(); watch(to, from); }
  })(t0);
}

05: The Lotus

The book's symbol became an interactive element. Eight petals in pure CSS; on desktop the scene follows the cursor with 3D parallax, and petals on the side facing the mouse brighten via a dot product of petal angle and tilt vector. On mobile — a spring animation on tap.

[ SYS_IMAGE_LOAD ] The "Eternal Questions" section with the interactive lotus

function animateLotus() {
  currentRX += (targetRX - currentRX) * 0.09;
  currentRY += (targetRY - currentRY) * 0.09;
  scene.style.transform = `rotateX(${currentRX}deg) rotateY(${currentRY}deg)`;
  petals.forEach((p, i) => {
    const a = i * 45 * Math.PI / 180;
    const dot = Math.sin(a) * targetRY / 22 + Math.cos(a) * -targetRX / 14;
    p.style.filter = `brightness(${1 + Math.max(0, dot) * 0.6})`;
  });
}

06: Conversion

Three equal paths to the book — print on Ozon, EPUB/FB2 downloaded straight from the site, audiobook on YouTube. Plus a "Write to us" form for those not ready to buy.

[ SYS_IMAGE_LOAD ] "Start your journey" section: three ways to get the book

07: Under the Hood

• A single index.html, ~100 KB, zero dependencies — loads instantly, hosts anywhere
• Scroll-reveal on IntersectionObserver, animations on requestAnimationFrame
• Smooth scrolling, sticky nav that changes state on scroll
• Responsive across three breakpoints (1100 / 860 / 420 px), separate logic for touch devices
• Book files (EPUB, FB2) served directly from the site

08: Outcome

A page that reads like a well-set book rather than a sales landing: calm, atmospheric, one accent per screen. And still — all three ways to get the book one click away, in lightweight, self-contained code with no dependencies.