Archivos Oscuros

E-Commerce Web App

View Detail
BackVisit site

A cinematic e-commerce bookstore for a dark, minimal ebook brand — stoicism, history, and warrior codes. A full-screen video hero where the word ARCHIVOS bleeds crimson through a dripping mask, a near-monochrome white-on-black design system with a single restrained ember accent, and a complete production storefront: catalogue with search, sort and filter, book detail pages, a cart, Stripe checkout, Clerk authentication, a personal library for owned titles, a free-books lead magnet, bundle offers, transactional emails, and an admin area. Awwwards-grade motion throughout — a dripping blood-fill title, a dual-wave scroll marquee, staggered reveals, and an interactive 3D character. Built with Next.js 16, React 19, Tailwind v4, and TypeScript, with per-book social images and a graceful demo mode.

Type
E-Commerce Web App
Role
Full-Stack Developer
Service
Web Design / Full-Stack Development / E-Commerce / Auth & Payments
Year
2026

Project Overview

Archivos Oscuros is a storefront for a dark ebook brand — a small catalogue of titles on stoicism, history, and the codes of warriors. The brief was a site that feels like the books themselves: austere, cinematic, and disciplined. The result is a near-monochrome white-on-black design system with a single restrained crimson accent, wrapped around a complete, production e-commerce flow.

It's a Next.js App Router application: browse, search, filter, and sort the catalogue; open a book detail page; add to cart; check out through Stripe; sign in with Clerk; and read owned titles from a personal library — with transactional emails, bundle offers, a free-books lead magnet, and an admin area behind it. A graceful demo mode lets the whole thing run live without any API keys.

Key Features

  • Blood-Fill Hero: A full-screen background video (played back at 2.5×) under a giant ARCHIVOS wordmark. Each letter fades in on a stagger, then a crimson gradient bleeds up into the letters through a dripping, animated clip-path mask
  • Cinematic Design System: Near-monochrome — white and bone on a true #010101 black — with a single muted-ember crimson used sparingly. Film grain, a soft vignette, and liquid-glass buttons carry the mood
  • Full Storefront: Catalogue with search, category filters, and five sort modes; book detail pages with related titles; a persistent cart; Stripe checkout; and success / cancel return flows
  • Auth + Library + Admin: Clerk authentication with a personal library that surfaces owned titles, a free-books lead magnet, and a protected admin area
  • Commerce Extras: Bundle offers, transactional emails via Resend, and per-book social share images generated on the fly with next/og
  • Awwwards-Grade Motion: A dripping blood-fill title, a dual-wave text marquee that focuses line-by-line, staggered scroll reveals, category reveals, and an interactive 3D character rendered with React Three Fiber
  • Graceful Demo Mode: When no keys are present the app degrades cleanly to a fully browsable demo — nothing breaks, everything is explorable

Technologies Used

  • Next.js 16 + React 19 + TypeScript: App Router storefront with server rendering, robots, sitemap, and structured data
  • Tailwind CSS v4: CSS-first design tokens (ink / bone / ash / ember scales), Poppins via next/font
  • Clerk: Authentication, sessions, and the owned-books library
  • Stripe: Checkout, payment return flows, and webhooks
  • Supabase: Data and ownership records; Resend for transactional email
  • Framer Motion + React Three Fiber: Hero blood-fill, dual-wave scroll, staggered reveals, and the interactive 3D character
  • Vercel: Deployment on a custom domain with CSP / HSTS security headers

Pages

  • Home — Blood-fill video hero, featured showcase, category reveals, dual-wave marquee, bundle promo, and an FAQ
  • Catálogo — The full archive with search, category filters, and sort controls
  • Libro — A book detail page with tagline, rating, price, related titles, and an auto-generated share image
  • Gratis — The free title, surfaced as a low-friction lead magnet
  • Carrito & Checkout — Cart, Stripe checkout, and compra success / cancel flows
  • Biblioteca, Acceso & Registro — Clerk-backed sign-in / sign-up and a personal library of owned titles
  • Admin & Legal — A protected admin area plus the full legal set (privacidad, términos, cookies, aviso legal)

Outcome

A production-grade storefront that reads like a single, deliberate object: the austere design system, the blood-fill hero, and the motion all pull in one direction, while a complete browse-to-checkout-to-library flow — with real auth, payments, and email — sits underneath. It's live on its own domain, and the demo-mode fallback means it can be explored end-to-end without configuration: a shippable e-commerce build, not a static mockup.