Website Redesign
Blood Destiny
Visual Novel Website Redesign
Blood Destiny is an in-development visual novel from the indie studio Ashes Aflame. The original site introduced the world, cast, and soundtrack well enough, but heavy background art and stock layouts flattened the visual hierarchy and slowed it down. DevMD rebuilt it from the ground up in Vue. The new build sharpens the visual identity to match the game's tone, adds cinematic motion, tightens the UX on every page, and loads faster. Drag the slider on each page to compare the original against the redesign.
BeforeBefore & After
See the jump in fidelity
Drag the handle to reveal the redesign over the original. Every "after" is a full-page capture of the live build now running at blooddestiny.com.
Home: original vs. revamped build — drag to compare, scroll inside to see the whole page
Features Added
What the revamped Vue build brings to the experience.
Cinematic animated hero
A drifting ember and particle field built on looped anime.js timelines, layered over the game's key art so the world feels alive the moment the page loads.
Atmospheric motion & parallax
Animated blurred gradient haze plus pointer and scroll-driven parallax give every scene depth and movement instead of a flat static backdrop.
Scroll-reveal animations
Content fades and slides into view as you move down each page, replacing the original's all-at-once load with a paced, trailer-like reveal.
Custom soundtrack player
A purpose-built audio player with play/pause, a seekable progress bar, volume control, live track time, and an animated indicator on the current track.
Audio-reactive visualizer
A real-time equalizer powered by the Web Audio API that reacts to the OST as it plays, turning the soundtrack page into an experience rather than a list.
Per-character detail pages
Each playable and supporting character gets a dedicated page with bio, a themed ambient accent, and prev/next navigation through the roster.
Animated devlog timeline
The Updates page becomes a vertical changelog timeline with a crimson connector line and scroll-revealed entries, making progress easy to follow.
Fully responsive
Fluid layouts and touch-friendly controls adapt cleanly from large desktop down to mobile, so the cinematic feel holds on every screen size.
Performance-minded media
Responsive, imgix-optimized image delivery keeps the heavy key art crisp on retina screens without bloated load times.
Cohesive design system
A unified type hierarchy, spacing scale, and crimson-on-dark palette applied across every page, replacing the inconsistent layouts of the original.
Page by Page
Every page of the original, ready for its redesign.
All other pages of the original, each paired with its redesigned counterpart from the live build. Drag any handle to compare.
Mobile Walkthrough
Built mobile-first, not mobile-after.
The redesign is fully responsive with touch-friendly controls. Here is the live build running on a phone — each screen auto-scrolls through the real mobile layout.
Stack Updates
Re-engineered from a static promo page into a modern Vue app.
Rebuilt as a component-based Vue application, replacing the flat structure of the original for maintainable, reusable UI.
Proper client-side routing powers the individual character detail pages and clean per-page URLs.
A dedicated motion layer drives the particle effects, parallax, scroll-reveal, and UI transitions throughout the site.
Real-time audio analysis powers the soundtrack equalizer/visualizer and the custom player.
On-the-fly responsive image optimization (format, sizing, quality params) for fast, retina-crisp art.
A modern build pipeline and responsive CSS system for a fast, mobile-first experience across breakpoints.
We considered three.js for the 3D/atmospheric effects but dropped it on purpose. All the atmospheric motion runs on anime.js, CSS, and the Web Audio API instead, for a lighter, smoother result.
Let's Build
Want a site that turns your project into an experience?
Whether it is a full redesign or a brand new build, DevMD designs and engineers fast, immersive websites with a visual identity that fits your brand. Tell us your goals and we will propose the right build path.