Creating a custom app to design a brand’s signature visual
The story of how Toolcraft helped our team at Pixel Point work on a brand identity for a client.
Start from this app
Run the CLI. Paste the copied command into your terminal.
Name your project. Choose a name, then let the CLI install the app and its dependencies.
Start building. Open the generated project and make it your own.
We were working on a branding and design project at Pixel Point for a client who wanted their brand identity to be inspired by light dispersion. They liked Stripe’s gradients and unusually shaped abstract objects. We wanted to create something unique for their brand.
So, you want to experiment with shapes, gradients, fluidity, and effects that suggest light dispersion. Maybe you also want to try noise, halation, glow, or other effects. But how would you even approach this? Draw it manually in Figma? That doesn’t feel like the right move when you want something interactive and don’t yet know what shapes, sizes, or effects you’ll need.
That’s exactly when it makes sense to move into Toolcraft. We started with a simple prompt and Octolane’s website as a reference, then kept iterating:
Initial prompt:
Build an app that will generate an animated field of prismatic light flowing across a composition. The light should feel like a soft three-dimensional sheet with folds, refraction, glow, and spectral color bands. Use octolane.com as a reference. Reverse engineer it and understand how the effect works. Give me a versatile set of controls so I can create something different from the reference.
AI works better when it has a reference. That can be an image or a video, but actual implementations give it the most to work with. That doesn’t mean copying the reference one to one. That’s the beauty of procedural graphics: you can use a reference as a starting point, then combine different parameters, effects, and mathematical formulas to create a completely different look.
The app took roughly a day to a day and a half to build. We weren’t working on it that whole time. We checked in occasionally to guide the AI, using Fable 5 for planning and Codex 5.6-sol for implementation.
Once the app was ready, its controls let us quickly find a look that worked for the hero section. We also used variations of those rays elsewhere on the site, including the footer.
Rendering WebGL effects across the full width of a page can be demanding, so we used video loops on the website. Toolcraft can handle that too: ask AI to add its built-in video export module and adjust the animation so the end joins smoothly with the beginning.
Toolcraft saved us a lot of time experimenting and helped us create a signature brand visual that would have taken much longer to make in other software.
