fil studio

We’ve been experimenting with interactive grids in WebGL across different projects lately. Here are two examples and some early explorations where the grid system becomes a language of its own: @eldepartamento.estudio A modular interface built for the architecture and interior design studio, where plans and content flow through a flexible grid. The system features an infinite, multi-latitude scroll and uses the grid not just as structure, but as part of the visual identity itself. Branding & Design: @gonhergueta Development: @_filstudio_ @pablo__escudero A reactive grid created for photographer Pablo Escudero’s website. A quirky configuration turns a minimal structure into a living, sculptural surface that responds to movement and imagery in real time. Design: @albertvillegas.cc @monicalosada.png Development: @_filstudio_ #webGL #grid #web

Parole per il domani RAI Pubblicità Exhibition, Triennale Milano La instalación propone la construcción de un manifiesto colectivo a partir de las palabras de los visitantes: una acumulación de ideas, posiciones y deseos que, juntas, dibujan una posible dirección compartida. Inspirándonos en los manifiestos de las vanguardias del siglo XX, diseñamos un sistema en el que las palabras se organizan en tiempo real dentro de un ecosistema dinámico: se relacionan, cambian y generan una composición visual y sonora en constante evolución. Gracias al mejor equipo, como siempre: Graphic & Motion Design: @thru.motion Development: @_filstudio_ Sound Design: @sonicarts.bcn Photo & Video: @akastudio_collective

We created a custom generative tool for @iaacbcn renewed visual identity, a system that transforms any image into a grid-based composition of colours and symbols. Using a pixelation engine, the tool analyses brightness levels, assigns colours from IAAC’s new palette, and maps them to a library of graphic tiles. This process enables the creation of dynamic visuals that remain fully aligned with the institution’s new branding. The tool can export both animated videos and high-resolution vector SVG images, making it suitable for digital content as well as large-scale printed materials. Built with web technologies and packaged as a desktop app, it empowers the IAAC team to generate consistent visual assets for their website, publications, and future communications. Concept, Branding & Direction: @wearemucho Tool’s UX, Design, Development & Engine: @_filstudio_ The bee’s video used in our recordings is by our friends at @_meltmeltmelt_ #tools #webgl #svg #glsl #generativedesign

We had the pleasure of guiding @_meltmeltmelt_ through its strategic transition from @glassworksvfx We began by defining the brand strategy, identifying the best ways to ensure a smooth transition. Then, we designed a visual system that reflects Melt’s new essence—not only as a leading post-production company but also as a creative powerhouse. Their new identity highlights visual and interactive experience design, embracing a craft-driven yet contemporary approach, where experimentation plays a key role through their Lab. For this project, @paula.norberto and Josep were in charge of design, @palabraestudio and @maria_de_la_ele led the brand strategy, while @_filstudio_ developed the website. 💡✨ #Branding #Design #Rebranding #CreativeStrategy #VisuaIdentity #Melt #GlassworksVFX #BrandLaunch #ExperimentalDesign

Last August we were in Bogotá setting up our latest installation piece we did in collaboration with @domesticdatastreamers for @nu.co We’ve built a 4 x 4 x 4 m LED box with its virtual space inside displaying realtime user’s data. A collection of digital marbles inside boxes driven by physics and interactions. We used our toolkit and developed an engine that was used on both the physical installation and its online virtual sister. Onsite touch terminals allowed visitors to build their own digital marbles according to their answers and send them inside the installation. Furthermore, visitors could participate as well from their own mobile devices and contribute to the installation as well. Even more people could join the conversation participating from home. Software production by Fil Studio Year: 2024 Credits @domesticdatastreamers overall project direction, creative direction, design, project management, tech direction and back-end development Software by Fil Studio @jocabola : Creative Tech Direction, Dev Lead, WebGL & installation development. @marti_fenosa : Touch Screen & Online Survey HTML Front-End Event in Bogotá: Stage, Hardware, Sensors & Tech: @vinilolab Production: @la_banda_l Photos & Video: @jhonny_gamez #installation #interactive #data #webgl #threejs #vfx #typescript

Last August we were in Bogotá setting up our latest installation piece we did in collaboration with @domesticdatastreamers for @nu.co We’ve built a 4 x 4 x 4 m LED box with its virtual space inside displaying realtime user’s data. A collection of digital marbles inside boxes driven by physics and interactions. We used our toolkit and developed an engine that was used on both the physical installation and its online virtual sister. Onsite touch terminals allowed visitors to build their own digital marbles according to their answers and send them inside the installation. Furthermore, visitors could participate as well from their own mobile devices and contribute to the installation as well. Even more people could join the conversation participating from home. Software production by Fil Studio Year: 2024 Credits @domesticdatastreamers overall project direction, creative direction, design, project management, tech direction and back-end development Software by Fil Studio @jocabola : Creative Tech Direction, Dev Lead, WebGL & installation development. @marti_fenosa : Touch Screen & Online Survey HTML Front-End Event in Bogotá: Stage, Hardware, Sensors & Tech: @vinilolab Production: @la_banda_l Photos & Video: @jhonny_gamez #installation #interactive #data #webgl #threejs #vfx #typescript

A website for production film company @petra_garmon , featuring our internal framework and smooth scroller library. Special mention to the scrolling based video player with credits and all the small motion and VFX details on the page. Images and videos have a companion WebGL duotone glitch layer driven by scrolling force and including a mouse trail mask on it. Produced by Fil Studio Year: 2024 Recognition: - Awwwards SOTD September 21st 2024 & Developer Awwward - Muzli Pick, September 5th 2024 Credits: @jocabola : Creative Direction, VFX, Project Management & Tech Lead @marti_fenosa : Front-End & Back-End Development @affaireprojects : Design @laiaferran : Motion Design @arnaumon : Client-Side Project Management #web #css #motion #webgl #threejs #vfx #typescript

A website for production film company @petra_garmon , featuring our internal framework and smooth scroller library. Special mention to the scrolling based video player with credits and all the small motion and VFX details on the page. Images and videos have a companion WebGL duotone glitch layer driven by scrolling force and including a mouse trail mask on it. Produced by Fil Studio Year: 2024 Recognition: - Awwwards SOTD September 21st 2024 & Developer Awwward - Muzli Pick, September 5th 2024 Credits: @jocabola : Creative Direction, VFX, Project Management & Tech Lead @marti_fenosa : Front-End & Back-End Development @affaireprojects : Design @laiaferran : Motion Design @arnaumon : Client-Side Project Management #web #css #motion #webgl #threejs #vfx #typescript

A website for production film company @petra_garmon , featuring our internal framework and smooth scroller library. Special mention to the scrolling based video player with credits and all the small motion and VFX details on the page. Images and videos have a companion WebGL duotone glitch layer driven by scrolling force and including a mouse trail mask on it. Produced by Fil Studio Year: 2024 Recognition: - Awwwards SOTD September 21st 2024 & Developer Awwward - Muzli Pick, September 5th 2024 Credits: @jocabola : Creative Direction, VFX, Project Management & Tech Lead @marti_fenosa : Front-End & Back-End Development @affaireprojects : Design @laiaferran : Motion Design @arnaumon : Client-Side Project Management #web #css #motion #webgl #threejs #vfx #typescript

Mobile World Capital 2024 We helped our friends at @gracias_grecia to build the interactive applications for an installation present during 2024 edition of MWC. The installation showcased innovation by Barcelona Supercomputing Center, Desigual and Wallbox. We created a #nodejs back-end infrastructure to communicate with hardware devices and created the logic and interfaces including text and procedural animations in #gsap #css and #glsl Creative direction and project management by @gracias_grecia Furniture & lighting by @froch.cc Design & Motion by @thru.motion Aurdino and sensors by Antonio Mechas Software by us Wallbox front-end by @jose.sentis Photos in these posts y @larectoria.tv

Mobile World Capital 2024 We helped our friends at @gracias_grecia to build the interactive applications for an installation present during 2024 edition of MWC. The installation showcased innovation by Barcelona Supercomputing Center, Desigual and Wallbox. We created a #nodejs back-end infrastructure to communicate with hardware devices and created the logic and interfaces including text and procedural animations in #gsap #css and #glsl Creative direction and project management by @gracias_grecia Furniture & lighting by @froch.cc Design & Motion by @thru.motion Aurdino and sensors by Antonio Mechas Software by us Wallbox front-end by @jose.sentis Photos in these posts y @larectoria.tv

Mobile World Capital 2024 We helped our friends at @gracias_grecia to build the interactive applications for an installation present during 2024 edition of MWC. The installation showcased innovation by Barcelona Supercomputing Center, Desigual and Wallbox. We created a #nodejs back-end infrastructure to communicate with hardware devices and created the logic and interfaces including text and procedural animations in #gsap #css and #glsl Creative direction and project management by @gracias_grecia Furniture & lighting by @froch.cc Design & Motion by @thru.motion Aurdino and sensors by Antonio Mechas Software by us Wallbox front-end by @jose.sentis Photos in these posts y @larectoria.tv