Abyss is a conversion-ready landing page crafted for indie studios, Kickstarter RPG campaigns, and Steam-store companion sites. Drop it in, swap the copy, and you have a trailer-worthy promo page without touching a bundler.
What's inside
- 9 fully-designed sections: fixed navbar with hamburger, full-viewport hero with animated particle canvas + oversized watermark, 5-stat counter bar with in-view animation, split story section with "play trailer" overlay, 6-card gameplay features grid, horizontally-scrolling screenshot gallery, 4-character hero grid with elemental glows, cinematic trailer banner with scanline overlay, CTA with $49.99 price treatment, and a minimal branded footer.
- Dark fantasy palette — deep ink black (
#04040a), signature crimson (#e8193c), gold highlights (#f5a623), and electric blue accents. Every color is a CSS custom property; skin the whole site from three variables. - Three typeface system — Orbitron (display), Rajdhani (UI/buttons), Inter (body). Loaded in one preconnected request from Google Fonts; swap for your own webfonts by editing a single line.
- Live particle hero — 80 drifting crimson + gold embers on an HTML canvas, respecting reduced-motion preferences. Lightweight: ~30 lines of vanilla JS, no libraries.
- Scroll-triggered counters — stat bar animates from zero to target the moment it enters the viewport. Smooth, cheap, no chart library.
- IntersectionObserver reveal animations on every major block — GPU-friendly opacity + translate, zero layout thrash.
- Responsive down to 375 px, with three thoughtful breakpoints (1024, 900, 640). Hamburger nav for phones, stacked story grid for tablets, collapsed feature grid for small screens.
- Trailer modal with escape-to-close and click-outside-to-dismiss. Drop a YouTube
<iframe>in to ship.
Why it sells
Every dark-fantasy game on Kickstarter, Steam Next Fest, or Indiegogo needs a promo page that feels like a trailer still. Abyss hits that note out of the box — high contrast, neon crimson accents, gaming-grade typography — and ships as a single file your marketing lead can edit without a dev.
Tech details
- Single HTML file, approximately 1,030 lines, ~55 KB uncompressed
- Zero build step, zero frameworks, zero runtime dependencies (fonts preconnected from Google Fonts)
- Vanilla JS only for: scroll-triggered nav background, hamburger, modal, reveal observer, counter animation, particle canvas loop
- Fully semantic —
nav,section,footer, properh1/h2hierarchy, descriptive alt-less pictograms via emoji for quick mock - Safe on every modern browser — tested in Chrome, Safari, Firefox, Edge
Who it's for
Indie game studios prepping a launch page, Kickstarter creators shipping an RPG, agencies building a promo microsite for a client in the gaming space, and hobby devs who want a polished "coming soon" page that outshines Unity templates.
Customization in under an hour
- Swap the three color variables in the
:rootblock — re-skins every card, button, border, and glow. - Replace the emoji pictograms with your own PNG/SVG art (they're standalone, no sprite maps).
- Change the stat targets via
data-targeton the stat-bar numbers. - Drop your YouTube trailer iframe inside the modal to replace the placeholder card.
- Swap the six gameplay pillars, four characters, and five gallery tiles — each lives in clearly commented blocks.
What you get
- Live encrypted HTML demo — preview the full page in the marketplace viewer before you buy
- Full unminified HTML source on purchase
- 12 months of minor updates (bug fixes, browser compatibility tweaks)
- Email support within 48 hours
Demo copy is placeholder for a fictional dark-fantasy RPG named ABYSS. Every line — game name, stat numbers, character descriptions, pricing — is editable from the same file. Treat it as scaffolding for your own launch.