Abyss ist eine konversionsoptimierte Landingpage für Indie-Studios, Kickstarter-RPG-Kampagnen und Steam-Store-Begleitseiten. Einfach einfügen, Text austauschen, und Sie haben eine Trailer-würdige Promopage ohne Bundler.
Was enthalten ist
- 9 vollständig gestaltete Abschnitte: feststehende Navbar mit Hamburger-Menü, Vollbild-Hero mit animierter Partikel-Canvas + übergroßes Wasserzeichen, 5er-Statistik-Leiste mit Scroll-Animation, geteilter Story-Abschnitt mit "Trailer abspielen"-Overlay, 6er-Gameplay-Features-Grid, horizontal scrollende Screenshot-Galerie, 4er-Character-Hero-Grid mit elementaren Glühen, filmischer Trailer-Banner mit Scanline-Overlay, CTA mit $49,99-Preisgestaltung und minimalem Branding-Footer.
- Dark-Fantasy-Palette – tiefes Tintenchwarz (
#04040a), signatur Karminrot (#e8193c), Goldakzente (#f5a623) und elektrisches Blau. Jede Farbe ist eine CSS-Custom-Property; gestalten Sie die gesamte Website aus drei Variablen um. - Dreiteiliges Schriftsystem – Orbitron (Display), Rajdhani (UI/Buttons), Inter (Body). Geladen in einer vorverbundenen Anfrage von Google Fonts; ersetzen Sie mit Ihren eigenen Webfonts, indem Sie eine Zeile bearbeiten.
- Live-Partikel-Hero – 80 treibende karminrot + goldene Gluten auf einer HTML-Canvas, respektiert Einstellungen für reduzierte Bewegung. Leicht: ~30 Zeilen Vanilla JS, keine Bibliotheken.
- Scroll-ausgelöste Zähler – Statistik-Leiste animiert von Null zum Ziel, sobald sie in den Viewport eintritt. Glatt, effizient, keine Chart-Bibliothek.
- IntersectionObserver-Reveal-Animationen auf jedem Hauptblock – GPU-freundliche Opazität + Translate, keine Layout-Verschiebung.
- Responsiv bis 375 px mit drei durchdachten Breakpoints (1024, 900, 640). Hamburger-Menü für Telefone, gestapeltes Story-Grid für Tablets, zusammengefasstes Feature-Grid für kleine Bildschirme.
- Trailer-Modal mit Escape-zum-Schließen und Klick-außen-zum-Verwerfen. YouTube-
<iframe>einfügen zum Versand.
Warum es verkauft
Jedes Dark-Fantasy-Spiel auf Kickstarter, Steam Next Fest oder Indiegogo braucht eine Promopage, die sich wie ein Trailer-Ende anfühlt. Abyss trifft diesen Ton sofort – hoher Kontrast, Neon-Karminrot-Akzente, Gaming-Grade-Typografie – und wird als einzelne Datei versandt, die Ihr Marketing-Lead ohne einen Entwickler bearbeiten kann.
Technische Details
- Einzelne HTML-Datei, ungefähr 1.030 Zeilen, ~55 KB unkomprimiert
- Kein Build-Schritt, keine Frameworks, keine Laufzeit-Abhängigkeiten (Fonts von Google Fonts vorverbunden)
- Nur Vanilla JS für: Scroll-ausgelöste Navbar-Hintergrund, Hamburger, Modal, Reveal-Observer, Counter-Animation, Partikel-Canvas-Schleife
- Vollständig semantisch –
nav,section,footer, ordnungsgemäßeh1/h2-Hierarchie, deskriptive Alt-lose Piktogramme über Emoji für schnelle Mock - Sicher auf jedem modernen Browser – getestet in Chrome, Safari, Firefox, Edge
Für wen es ist
Indie-Spielstudios, die eine Startseite vorbereiten, Kickstarter-Ersteller, die ein RPG versenden, Agenturen, die eine Promo-Microsite für einen Kunden im Gaming-Bereich bauen, und Hobby-Entwickler, die eine polierte "Coming Soon"-Seite wollen, die Unity-Vorlagen übertrifft.
Anpassung in unter einer Stunde
- Tauschen Sie die drei Farbvariablen im
:root-Block – gestaltet jede Karte, jeden Button, jeden Border und jedes Glühen um. - Ersetzen Sie die Emoji-Piktogramme mit Ihrer eigenen PNG/SVG-Kunst (sie sind eigenständig, keine Sprite-Maps).
- Ändern Sie die Statistik-Ziele über
data-targetauf den Statistik-Balkenzahlen. - Legen Sie Ihren YouTube-Trailer-iframe in das Modal ein, um die Platzhalter-Karte zu ersetzen.
- Tauschen Sie die sechs Gameplay-Säulen, vier Charaktere und fünf Galerie-Kacheln – jede befindet sich in deutlich kommentierten Blöcken.
Was Sie bekommen
- Live-verschlüsselte HTML-Demo – Vorschau der vollständigen Seite im Marketplace-Viewer vor dem Kauf
- Vollständiger unkomprimierter HTML-Source beim Kauf
- 12 Monate kleinere Updates (Bugfixes, Browser-Kompatibilitäts-Tweaks)
- E-Mail-Support innerhalb von 48 Stunden
Demo-Text ist Platzhalter für ein fiktives Dark-Fantasy-RPG namens ABYSS. Jede Zeile – Spielname, Statistik-Zahlen, Charakterbeschreibungen, Preisgestaltung – ist von derselben Datei aus bearbeitbar. Behandeln Sie es als Gerüst für Ihren eigenen Start.