Visionary Colour is a boutique colour grading studio based in Malaysia, led by colourist Danny Gan. Their work spans commercial advertising, music videos, and feature films — with a client roster that includes Grab, Toyota, OPPO, Four Seasons Osaka, Astro Shaw, and Braun Büffel.
The site needed to do several things at once: showcase the grading work as a cinematic portfolio, sell LUT packs and PowerGrade tools through a WooCommerce shop, host an online colour grading academy, and communicate the studio’s premium positioning — all without the site itself feeling generic.
We handled the full development using Elementor Pro as the foundation, then built custom Elementor widgets and bespoke scroll animations to achieve the visual effects the design demanded. The result is a site where every scroll feels like a frame from one of their own productions.
Visionary Colour | Boutique Colour Grading Studio
A cinematic, animation-driven website for Visionary Colour — a boutique colour grading studio based in Malaysia. Built with Elementor Pro, custom Elementor widgets, and bespoke scroll animations for a studio whose work includes Grab, Toyota, OPPO, and Braun Büffel.
What we built and why
Technologies used
The design across all devices
How we approached it
The brief for Visionary Colour was clear: the website itself had to feel like it had been colour graded. Every section needed cinematic quality — not just in the imagery, but in how the page moves and reveals itself.
The site is structured around three distinct revenue streams — client grading work, the online academy, and the cinematic tools shop — each needing its own visual language while staying cohesive. The homepage acts as a showreel and a menu simultaneously, drawing visitors into whichever area matches their intent.
Full-bleed video backgrounds, smooth scroll-triggered reveals, and a dark editorial palette were the core design choices. We built custom Elementor widgets to handle the non-standard layout behaviours the design required — horizontal work carousels, video hover states on portfolio items, and animated section transitions that Elementor's native widgets couldn't achieve out of the box.
Build highlights
Built bespoke Elementor widgets from scratch to handle layout and interaction patterns the native widget library couldn't support — including the portfolio work carousel, animated section headers, and the cinematic video reveal components.
Developed a custom JavaScript animation system for scroll-triggered reveals across every section — text entrances, image fades, and video sequence triggers — giving the site a cinematic flow that matches the studio's own work.
Architected the site across three clear revenue streams — client portfolio, online academy, and digital tools shop — each with its own page structure, CTA flow, and content type, all unified under a single brand experience.
Built and configured the WooCommerce store for Visionary Colour's digital product range — LUT packs, PowerGrade templates, and DJI/Sony-specific colour tools — with clean product pages and a frictionless checkout flow.
The Works section features full-bleed video thumbnails with hover-to-play behaviour and smooth transitions between portfolio entries — letting the grading work speak for itself without heavy UI distraction.
Integrated the Visionary Colour Academy as a full section within the site — with course preview video, curriculum overview, and a clear enrolment CTA — enabling the studio to sell online education directly from its main web presence.
Challenges & solutions
Achieving cinematic animation quality within Elementor
Elementor's native animation tools are limited to basic entrance effects. The design called for sequenced scroll-triggered animations, video reveal timings, and custom transition behaviours that simply don't exist in the Elementor widget library.
Custom widgets and a JavaScript animation layer
We built custom Elementor widgets for the non-standard components and added a lightweight JavaScript animation layer on top — giving us full control over timing, sequencing, and scroll behaviour without abandoning the Elementor build structure the client needed for ongoing content management.
Serving three different audiences from one homepage
The homepage needed to speak to commercial clients looking to hire a colourist, students looking for a colour grading course, and filmmakers shopping for LUT packs — three very different intents in one visit.
Sequential storytelling with clear audience exit points
We structured the homepage as a downward journey — studio identity first, then portfolio, then academy, then shop — with clear CTAs at each layer. Each audience self-selects their path without the homepage feeling cluttered or unfocused.
Results & impact
Visionary Colour launched with a site that genuinely reflects the quality of the work it showcases. The cinematic scroll experience has been noted by industry peers as standing out in a creative sector where most portfolio sites look identical.
The three-stream architecture means the site earns revenue passively through the shop and academy while the client grading work continues to be the flagship. Clients including Grab, Toyota, and OPPO arrive at a digital presence that immediately validates the studio's premium positioning — before a single conversation takes place.
Final thoughts
A colour grading studio's website should feel colour graded. Custom widgets, scroll animations, and a cinematic build strategy delivered exactly that.
Visionary Colour is the kind of project that pushes what Elementor can actually do. By combining custom widgets with a JavaScript animation layer, we delivered a site that looks and feels custom-built — while keeping the underlying structure manageable for the client. The work, the academy, and the shop now all live in one cohesive digital home that earns trust and revenue simultaneously.
Next → 