A front door for
a fantasy universe.
Fire Spirit spans a novel, a graphic novel, characters, lore, and concept art. I designed and built the website that ties it all together: cinematic enough to feel like the world, and clear enough that visitors can find the book.
ROLE
TOOLS
LIVE
01
THE PROBLEM
A lot of world.
No way in.
The universe already existed: lore, characters, artwork, a novel, a graphic novel. What it lacked was an entry point. The job was to organize that depth so that first-time visitors aren’t overwhelmed and still end up at the book.
WHAT EXISTED
Novel
Characters
Creative team
Graphic novel
Lore
Reader reviews
Concept art
Newsletter
WHERE IT LIVES NOW
HOME
BUY THE BOOK
THE TEAM
STORIES OF AZKIN
CONTACT
Four doors from the homepage. Pages close on the same newsletter ask.
02
THE STRUCTURE
Every section
earns its place.
The homepage works as a guided descent: art first, then story, then proof the world is alive, then the people behind it. Most sections close on a single, clear next step.
Hero
01
Artwork leads. One line of copy, one call to action.
Visions
03
Concept art and lore, linked to Instagram, show a world still being built.
04
Reader voices
Early reader impressions add credibility ahead of launch.
02
The story
The synopsis sits up front, with the release date as the CTA.
Author
05
Puts a person behind the world, then hands off to the team.
06
Newsletter
A recurring banner that closes pages on the same ask.
03
THE READER · STORIES OF AZKIN
A graphic novel you can
read without leaving the site.
The goal: let visitors read an illustrated story in the browser, with no PDF download and no external viewer. I designed and built a custom reader in HTML, CSS, and JavaScript on PageFlip 2.0.7, embedded into Wix Studio through an HTML iframe.
THE READER IN MOTION
Desktop
Mobile
Both recorded on the live site. Desktop: cover, spread, page turns, zoom. Mobile: loader, on-load hint, tap to turn, zoom and pan from the bottom bar.
THREE STATES, ONE SEQUENCE
Cover
The closed cover is re-centered, instead of sitting on the right half of an empty spread.
Open spread
Opens to a full two-page spread. Readers turn pages by grabbing the page edges.
Zoomed
A + / − / reset rail zooms up to 2.5×. While zoomed, dragging pans the page instead of flipping it.
THE PIVOT
TRIED FIRST · COMMON NINJA
Off-the-shelf PDF flipbook
✕ Unwanted visual effects
✕ Restricted customization
✕ Not enough control over mobile presentation
BUILT INSTEAD
Custom PageFlip reader
✓
Brand-aligned presentation inside the site
✓
Full control over layout and styling
✓
Mobile-specific styling and sizing, based on the embedded viewport
TWO INPUT MODELS
Desktop
Native PageFlip interaction with the real page-curl animation. Readers turn pages from the page edges, and a hint tells them so.
Mobile
PageFlip handles layout only. The reader shows one page at a time; tapping the left or right edge turns it directly, with no curl. Zoom controls move to a bottom bar, and a hint on load teaches both gestures.
Hint on load
“Tap to turn pages. Pinch to zoom or use controls.” Shown once, then fades.
One page at a time
Portrait layout: a single page fills the screen instead of a cramped spread.
Zoom from the bottom bar
+ / − / reset sit under the thumb. Zoomed pages pan with one finger.
UNDER THE HOOD
i
Render without waiting
The reader renders once the first three pages load, or after 8 seconds, whichever comes first. The remaining 13 load and decode in the background.
ii
Survive the Wix iframe
Two animation frames let the iframe settle before PageFlip measures. A debounced ResizeObserver re-fits the book and returns the reader to the same page.
iii
Read in the right order
Cover, open, and end states reposition the book, so a single cover or back page sits naturally instead of floating beside an empty half.
iv
Zoom without fighting the flip
While zoomed, PageFlip stops receiving pointer events, so a drag pans the page instead of accidentally turning it.
04
THE KIT
Their brand,
built for the web.
The Fire Spirit brand (logo, palette, and type) came from the client. My job was to translate it into a web system: navigation, buttons, content blocks, image treatments, and CTA banners, documented in Figma so the book page, team profiles, reviews, and the graphic novel all draw from the same parts.
Type scale
Button states
Team profile card
Newsletter banner: one component, reused to close pages
05
THE LAUNCH
Live, and
still growing.
The site is live with the graphic-novel reader built in. It keeps expanding as new books, stories, and lore arrive, refined through ongoing iteration with the creative team.
WHAT SHIPPED
— Responsive desktop and mobile experiences
— Interactive Stories of Azkin reader
— Buy the Book landing page
— Team profiles
— Reader testimonials
— Newsletter integration
— Custom HTML components
DESIGN TRADEOFF
“Platform over custom stack. Wix Studio keeps the site editable for the team; custom code fills the gaps where the platform falls short.”
