Himawari Roastery
Full-stack e-commerce platform for an Indonesian specialty coffee roastery direct ordering with dual payment flows (Doku + manual transfer), order tracking, and a custom admin CMS with payment verification built in.
rezznr_
A website that moves, not a digital brochure that sits still.
A 3D website is not about bolting on animation so the page looks expensive. The point is concrete: a product visitors can rotate and inspect from every angle explains itself far better than five catalogue photos, and animation tied to scroll keeps people reading to the bottom instead of closing the tab.
I build these with Three.js and WebGL for the 3D objects, GSAP ScrollTrigger for the scroll choreography, and React Three Fiber when it needs to sit tightly inside React. Every 3D asset loads after the main content is on screen, so the page still opens fast and still reads correctly when a visitor’s device has no WebGL at all.
The homepage of this site is the example: a mechanical keyboard that assembles itself as you scroll, built from procedural geometry rather than a heavy downloaded model, and it still respects a visitor’s "reduce motion" setting.
Rp 5 million to Rp 25 million
Timeline 3 to 10 weeks · domain and hosting not included
What drives the cost up: number and complexity of 3d models, scroll animation choreography, support for lower-end devices.
Full pricing for every serviceProducts or objects visitors can rotate, zoom, and inspect right in the browser with no plugin.
Scroll-driven choreography with GSAP ScrollTrigger: pinning, parallax, and smooth transitions between sections.
Hover states, page transitions, and small feedback that make the interface feel alive and responsive.
3D assets load lazily after the main content, with an agreed size ceiling so the page stays quick.
Devices without WebGL and visitors with "prefers-reduced-motion" still get a complete, usable page.
Render quality and frame rate step down automatically on phones so battery and heat are not the price of the effect.
We go through the business goal, who the users are, and what should happen once someone opens your website. The output is a concrete list of pages, features, and priorities.
Wireframes first, then visual design that follows your brand identity rather than a theme with your logo dropped on top. You review it before a single line of code is written.
Built with Next.js and TypeScript. Responsive from small phones to wide monitors, accessible, and fast from the start instead of optimised at the end.
Cross-device testing, a performance and technical SEO pass, revisions, then deployment to your domain along with a short guide to the CMS.
A bug-fix warranty, uptime monitoring, and an optional monthly maintenance arrangement if you want the website to keep evolving.
Real projects already in production, not mockups. Each case study includes screenshots and an account of what was built.
Full-stack e-commerce platform for an Indonesian specialty coffee roastery direct ordering with dual payment flows (Doku + manual transfer), order tracking, and a custom admin CMS with payment verification built in.
A subscription-based design agency website built with Next.js and Tailwind CSS, integrated with Payload CMS (v3) & PostgreSQL, featuring dual-language localization (EN/ID), interactive Framer Motion animations, and an advanced SEO-first architecture.
Premium digital wedding invitation platform for Indonesian couples — animated template marketplace, live invitation editor, guest & RSVP management, and a full wedding planning toolkit with integrated payments.
Not when they are built in the right order. Text and key images render first; 3D assets download afterwards, once the browser is idle. On this site the 3D scene only starts downloading after the page is usable, which keeps First Contentful Paint under a second.
There are two safety nets: render quality drops automatically on weaker devices, and if WebGL is missing entirely the page still renders in full without the 3D element. No blank screen.
Not necessarily. Geometric shapes can be generated procedurally in code, or I can build the model from your product photos and references. If a designer already gave you GLB/GLTF files, those can be used directly.
No, because the page content is still server-rendered as plain HTML. Search engines read the text and structure without ever running the animation.
It depends on object complexity and how many animated scenes there are. One rotatable product is far lighter than a multi-section scroll choreography. Once I have seen your visual references, I can give a number.
Tell me what you need and I will reply with a time estimate and the technical approach, with no charge for the first conversation.