برچسب: Art

  • The Art of Play: Karim Maaloul’s World of Interactive Wonder

    The Art of Play: Karim Maaloul’s World of Interactive Wonder


    Karim Maaloul, Developer spotlight

    Hi, I’m Karim, co-founder and Creative Director at EPIC Agency. I lead a team of talented designers and collaborate closely with skilled developers at EPIC to craft nice looking and user friendly websites.

    I’m closely involved in UX/UI design, from early prototyping to the design of full digital platforms.
    I also dedicate much of my time to crafting game concepts and 3D models for activation games and immersive experiences.

    By night, you’ll often find me coding games or experimenting with shaders, still chasing that spark of play and creativity that started it all.


    Free GSAP 3 Express Course


    Learn modern web animation using GSAP 3 with 34 hands-on video lessons and practical projects — perfect for all skill levels.


    Enroll Free

    Highlighted projects

    The Cursed Library

    The Cursed Library is a passion project that blends my lifelong love for children’s books, classic tales, and dark, immersive atmospheres. I designed six unsettling worlds inspired by well-known stories, modeled entirely in Blender 3D.

    Powered by Three.js and custom shaders, the experience unfolds as a journey through a haunted library, where hidden portals transport visitors into different dimensions.

    Sound is at the heart of the experience. Every whisper, melody, and echo shapes the mood. The amazing Steve Jones and Jules Maxwell crafted the haunting soundtracks, recorded the voices, and coded the intricate audio transitions.

    Captain Goosebumps

    Every year at EPIC, we dedicate our time and expertise to support a cause that reflects our values. This year, we chose to raise awareness for Live in Color, a Belgian organization that promotes the inclusion of refugees through education.

    To do so, we created a playful web game featuring a skiing goose that brings color back to the world. While the core development was led by my colleague Théo Gil Cerqueira, I was responsible for the art direction, illustration, and shader coding of the trail.

    Red Bull Sand Scramble

    Red Bull is a client we collaborate with regularly. I’ve been involved in several game projects for them, but my favorite is Red Bull Sand Scramble, a fast-paced racing game where I developed a simple yet efficient physics engine, along with the 3D modeling and gameplay design.

    I worked closely with Shamil Altamirov who developed the interface, and my associate Thierry Michel, who coded the whole gameplay and transformed a rough prototype into an energetic, adrenaline-filled experience that perfectly captures the spirit of Red Bull.

    Tiny Experiments

    I’ve always had a soft spot for small-scale projects. I enjoy crafting bite-sized experiences that explore simple mechanics and techniques in playful ways. I spend a lot of time experimenting on CodePen, where I can focus on the tiny details and polish every interaction.

    Here are a few of those experiments.

    See the Pen
    Skating bunny by Karim Maaloul (@Yakudoo)
    on CodePen.

    Skating Bunny is a small minimalist game I built as a playful reward for people who contact us through our website. It was a perfect excuse to experiment with the frame buffer technique used to draw the skate marks and to craft custom shaders for the smooth, blurred floor reflections.

    See the Pen
    Infinite Portals by Karim Maaloul (@Yakudoo)
    on CodePen.

    Two worlds are interconnected, sharing the same camera view but existing in different spatial dimensions. This experiment is another take on the portal effects I previously explored in The Cursed Library.

    See the Pen
    Chill the lion by Karim Maaloul (@Yakudoo)
    on CodePen.

    Chill the Lion was the Codepen that got me the most attention, I made it during a heat wave, and somehow, it went viral.

    It was also one of my very first experiments with Three.js, where I built a lion entirely out of cube primitives.

    Back then, I had no 3D modeling experience at all. Learning Blender 3D later on completely transformed how I design and bring interactive characters to life.

    About me

    I began my career nearly two decades ago as a children’s book illustrator before transitioning into web design. I then joined several agencies as a Flash developer, creating rich interactive experiences. When Flash met its end, I dove into Three.js, exploring new ways to bring interactivity to the web through 3D experiences and games.

    What I love most is blending my illustration, design, and coding skills to craft short, playful experiences.
    I enjoy infusing my own art direction into the code and constantly learning new techniques to better express my creative vision.

    These days, I’m most excited about Godot, an open-source, lightweight alternative to the big game engines.
    I’m also curious to see how AI will shape and expand the creative process.
    And of course, I’m still interested in Three.js, especially TSL, a node-based shading language that simplifies the creation of shaders.

    Karim and Wenzhu at work
    This is me, pretending to work very hard with my colleague Wenzhu.

    Tools

    I use Blender3D, Figma, Photoshop, and After Effects daily to shape the design of my experiences. On the coding side, I rely on Three.js, GSAP, and vanilla JavaScript to bring my characters to life.

    Lately, with the rise of AI, I’ve been experimenting with ComfyUI, Midjourney, and VEO3.

    Final Thoughts

    In the end, tools are just tools.
    I once saw a calligrapher write a stunningly beautiful word using only his finger and some coffee as ink. A perfect reminder that the greatest skill one can develop is a sharp eye and a rich, open-minded sense of curiosity.

    Codrops illustrates this idea by showing that there’s never a single way to achieve an effect.
    Mastering a technique broadens your skill set, but what truly matters is the ability to forge your own path.

    Thank you for reading this spotlight!



    Source link

  • Bloom Paris TV: Where Refined Art Direction Meets World-Class Production

    Bloom Paris TV: Where Refined Art Direction Meets World-Class Production



    In today’s oversaturated landscape of production service companies vying for attention, Bloom Paris TV approached our studio with an extraordinarily bold ambition: to distinguish themselves through an uncompromising combination of refined style and substantive expertise. Strategically positioned in the cultural and creative heart of Paris, Bloom offers international productions comprehensive and seamless on-the-ground support throughout France — meticulously handling everything from complex technical logistics to complex administrative workflows and regulatory requirements.

    But what truly sets Bloom apart is that they don’t merely facilitate shoots — they orchestrate them with exceptional precision, artistic vision, and unwavering reliability. In an industry where every minute counts, their discerning clients demand speed without sacrificing quality, complete trust in execution, and uncompromising excellence at every touchpoint. Bloom consistently delivers all three elements — seemingly effortlessly and with characteristic French sophistication.

    Our mission became crystal clear: design and develop a digital experience that authentically reflects the remarkable sharpness of their creative eye, the methodical structure of their production process, and the sophisticated elegance of their flawless execution across every project they undertake.

    The Concept

    We approached the website design with one unambiguous and defining intention: make an immediate, memorable impact upon first impression.

    Operating in a fast-paced industry where critical decisions are often made in mere seconds, we recognized that the digital experience needed to be simultaneously bold, fluid, and instantaneously engaging. Our strategic approach centered on minimalism with deliberate intent — methodically stripping away all superfluous elements while preserving only the absolute essentials, then thoughtfully amplifying Bloom’s distinctive core identity throughout the interface.

    At the conceptual heart of Bloom’s sophisticated logo lies a deceptively simple dot — subtle in appearance yet powerful in significance. We strategically extended this symbolic element across the entire user interface: integrating it within interactive buttons, intuitive navigation elements, typographic superscripts, and responsive interaction states. This visual motif evolved into the unifying thread throughout the experience, functioning as a recurring punctuation mark that guides users through a clean, cinematic narrative journey.

    Typography & Color System

    After careful consideration, we selected a commanding, contemporary sans-serif typeface specifically chosen to convey professional confidence and exceptional clarity. This distinctive font effectively anchors the entire site within a precisely calibrated, almost editorial layout structure — creating a harmonious balance between the dynamically asymmetric grid system and the meticulously structured, authoritative tone of voice that characterizes Bloom’s communication style.

    The carefully curated color palette features a sophisticated high-contrast dialogue between rich soft black and warm, inviting light grey, consciously avoiding the harshness of traditional monochrome combinations. A strategically placed vibrant yellow accent punctuates key interactive elements throughout the interface — subtly referencing cinematic film titles and professional cue markers, while simultaneously introducing a welcome sense of warmth, energy and approachability to the otherwise restrained interface design.

    Technology Stack

    Beneath the visually striking surface, the site is meticulously constructed with a powerful combination of technologies:

    • WordPress implemented as a robust, infinitely customizable content management system, providing Bloom with comprehensive control over their content strategy and presentation
    • GSAP for implementing buttery-smooth, cinematically-inspired animations and seamless page transitions throughout the experience
    • Custom-developed SVG masking techniques meticulously crafted to achieve elegantly seamless panel-based transitions between content sections
    • A fully responsive, thoroughly performance-optimized front-end architecture that ensures consistent excellence across all devices and connection speeds

    Loader & Page Transitions

    From the earliest conceptual discussions, we were determined to ensure that every transition moment within the experience would feel authentically cinematic and emotionally resonant.

    Each individual page opens with a dynamically animated panel that dramatically reveals the upcoming section title with a sweeping, theatrical gesture. This carefully choreographed visual sequence not only significantly enhances user orientation within the site architecture, but deliberately sets the sophisticated tone for a fluid, immersive journey through Bloom’s professional world.

    The distinctive homepage loader was specifically designed to create instant emotional resonance and connection: a fullscreen mask elegantly opens to dramatically reveal Bloom’s captivating showreel — creating an unforgettable first impression that immediately communicates their production capabilities. Thoughtfully combined with an interactive progress indicator, this element transforms into an engaging interactive curtain, gracefully inviting users to step into Bloom’s compelling narrative universe.

    Project Grid & Hover States

    Throughout the portfolio section, Bloom’s impressive projects are presented within a sophisticated asymmetric editorial grid structure, deliberately breaking the predictable monotony of conventional layouts while thoughtfully echoing the dynamic rhythm of visual storytelling. Individual content sizes and positions shift intuitively throughout the composition, creating intentional moments of both contemplative pause and energetic flow.

    During user interaction, the signature dot elegantly reappears as an intuitive focus indicator, while a smoothly animated marquee title gracefully glides over the preview image — simultaneously drawing attention and adding perceptual depth to the experience. This carefully considered combination creates a remarkably tactile, multi-layered effect that meaningfully rewards user interaction without overwhelming the visual hierarchy or distracting from the exceptional quality of Bloom’s project portfolio.

    Footer

    Thoughtfully designed as a final memorable touchpoint rather than an afterthought, the site’s footer functions as much more than a mere sign-off — it serves as an compelling invitation to further engagement.

    The footer section artfully reprises elements from the initial showreel presentation, elegantly contained within a precisely masked frame that maintains consistent visual language throughout the experience. Both functionally informative and poetically expressive, this distinctive footer ensures that Bloom’s powerful brand experience lingers in the user’s memory — even long after the final scroll action concludes their immediate journey.

    Who We Are

    We proudly define ourselves as a specialized digital design studio operating at the fascinating intersection of compelling narrative, intuitive interaction design, and cutting-edge technology implementation. We fundamentally believe in the transformative power of crafting digital interfaces that move with deliberate intention and purpose, thoughtfully combining minimalist aesthetic principles with boldly distinctive creative identity expressions.

    With each project we undertake, we consistently strive to create memorable digital experiences that communicate with exceptional clarity, move with captivating beauty, and feel genuinely alive and responsive to human interaction.



    Source link