Interactive 2D-3D Character Website
Budget: $900 – $1,200 USD
I’m building a story-driven website that launches with four very real-looking 2D characters—photo-based girls who introduce each section of the site and trigger the table of contents. As the project evolves, those same characters will appear in fully modelled 3D form inside short commercials, so the front-end must be ready for WebGL or another lightweight 3D pipeline from day one.
Core flow
• Landing page opens on the girls; hovering reveals subtle motion, clicking starts a full animated sequence that pulls visitors into the content.
• The physician’s “What the body is going through” section is the heart of the site. Here I need seamless, full-screen sequences that blend the doctor’s narration with explanatory 2D graphics—think animated infographics that sync to the voice-over.
• Commercial spots pop up contextually throughout the journey. These will feature the 3D versions of the girls, so the framework must let us swap in the higher-fidelity models without rewriting the page logic.
• A phased ecommerce module comes later; for now, placeholders and a clean hand-off path to a cart/checkout layer will do.
What I need from you
1. Design & build a responsive site that supports both 2D sprite sheets and future Three.js / Babylon.js assets.
2. Create or integrate the initial photo-based 2D character art, rigging it for smooth narrative sequences.
3. Develop the full animated sequences for the physician section and early commercial slots, wired to play/pause smoothly across devices.
4. Set up a modular content system (React / Vue / vanilla JS—your call) so I can add new chapters, commercials, or ecommerce pages without code rewrites.
5. Optimise loading and performance; animation can’t stutter on mid-range mobiles.
Acceptance check
• Four characters animate correctly on first load, and each triggers the table of contents.
• Physician section runs a complete sequence with synced narration, no dropped frames at 30 fps on mobile.
• Commercial slot accepts a test 3D model and plays in-place.
• All assets lazy-load, Lighthouse performance score 90+ on mobile.
If this sounds like the kind of hybrid 2D/3D storytelling site you love to engineer, let’s discuss your approach, preferred tools, and timeline.
Core flow
• Landing page opens on the girls; hovering reveals subtle motion, clicking starts a full animated sequence that pulls visitors into the content.
• The physician’s “What the body is going through” section is the heart of the site. Here I need seamless, full-screen sequences that blend the doctor’s narration with explanatory 2D graphics—think animated infographics that sync to the voice-over.
• Commercial spots pop up contextually throughout the journey. These will feature the 3D versions of the girls, so the framework must let us swap in the higher-fidelity models without rewriting the page logic.
• A phased ecommerce module comes later; for now, placeholders and a clean hand-off path to a cart/checkout layer will do.
What I need from you
1. Design & build a responsive site that supports both 2D sprite sheets and future Three.js / Babylon.js assets.
2. Create or integrate the initial photo-based 2D character art, rigging it for smooth narrative sequences.
3. Develop the full animated sequences for the physician section and early commercial slots, wired to play/pause smoothly across devices.
4. Set up a modular content system (React / Vue / vanilla JS—your call) so I can add new chapters, commercials, or ecommerce pages without code rewrites.
5. Optimise loading and performance; animation can’t stutter on mid-range mobiles.
Acceptance check
• Four characters animate correctly on first load, and each triggers the table of contents.
• Physician section runs a complete sequence with synced narration, no dropped frames at 30 fps on mobile.
• Commercial slot accepts a test 3D model and plays in-place.
• All assets lazy-load, Lighthouse performance score 90+ on mobile.
If this sounds like the kind of hybrid 2D/3D storytelling site you love to engineer, let’s discuss your approach, preferred tools, and timeline.