Stoked to see the @bakerbleu site I worked on live in the world. Working under the guidance of @an.mathews , dev by @tom.m_b , creative direction by Tim Myer. Completed at Atollon.
Generative type made with WebGL running live in the browser. Editable type made from blobs that morph in proximity to one another, guided by letterforms. From very abstract dots to readable type and back again.
Some landing page concepts using JavaScript to pull live data from the browser and map the connections between elements. So what you see is a rendering of the process of rendering the site.
This is how you can turn any motion graphics video into an editable file in After Effects using scripting. This is vibe coding for motion design. This points towards a massive paradigm shift in how we interact with motion graphics interfaces. Infinite apologies to @societaldesign.elisava and the inspirational @martinlorenz for reverse engineering your material.
This is how you can use vibe-coded JavaScript animations in a logical and useful way for your web projects. You don’t need to subscribe to some expensive platform, I’m building this on Wordpress with the excellent @laytheme
I’ve spent the last few days exploring what’s possible building my own custom design tools. Already this is super interesting to me - creating generative kinetic type in the browser and doing things that are very hard to achieve otherwise. If we can build these rudimentary tools easily now - where does this lead in the future? Knowing how to code is no longer a barrier to creating software - what can we build to push design forwards?
Using p5js to create kinetic text effects live in the browser. Taking everything ive learned from my time in @cavalry.app to try and create something that is live, interactive and fun for the user. Obviously its not as polished or dynamic as something rendered in After Effects but hopefully i can find a way to make it just as engaging.
System002:
When creating a system that reacts to audio we are extracting data from audio, or perhaps translating into data. The signals that emerge from this process are more complex than anyone could animate manually. Sometimes they’re perfect as is, sometimes they need manipulation.
When the cadence of the system aligns it seems to reveal the connection between our senses in the same way that a hallucination might.
Inputs and outputs become confused. It becomes difficult to tell whether you’re seeing the sound or hearing the visual.
From a simple system we create endless layers of complexity.
Basic Systems >>> Infinite Variation
#motiongraphics #aftereffects #motiondesign #cavalryapp #motion #typography
Further experiments with @cavalry.app reacting to two channels of audio. Didn’t have much of an idea of how it would come out so the two channels sounds are quite random. The next thread to follow is how to create something with more contrast between fast and slow animation - but to do this relies on how the sound is designed. Thinking about a visual outcome while doing sound design is a very interesting way to work. For the next piece I understand how I want it to look, so now I have to make the sound that will enable this. So many layers in this workflow! Sound was created using a diy version of a granular sampler. Recording some chords using abletons wavetable synth, loading them into the sampler and just shortening loop lengths until things get weird. Then recording that output and processing and arranging.
Static frames taken from a further iteration of @galleryrecs motion system. With this iteration I’m starting to explore more post processing in after effects. Using @cavalry.app as always for initial generation of assets - then adding mapped gradients, glow and noise inspired by @designbyjake_ and his post processing ideas.
Creating truly modular, flexible visual systems to deliver video content across any format, aspect ratio or platform with minimal amounts of double handling. Inspired by the ideas of @flexiblevisualsystems - thanks to @galleryrecs for the opportunity to put theory into practice. Created using @cavalry.app
