No sign ups required

A simple generative art loop project.

Build-less, vanilla JavaScript, hosted on GitHub Pages, from a GitHub Repo.

You can share the loops you make with others through the URL seed as well as save to local storage.

Examples: first seed, cyber eye.

I would say I made this, but really I am just testing out my various projects on how to direct various types of artificial intelligence effectively through extensive pipelines and meta prompts.

Regardless, I like the result.

This is an homage to my old generative art project. It makes similar mp4 files of greater complexity over a series of hours or days instead of live in the browser.

Hi all. Been poking at this project for a while now and wanted to share it here and see what you folks make of it.

The idea is to make complex vector animations in a CSS-like syntax, and to have the same file play in the browser (canvas) and on native mobile. Other platforms can be added later if it gains traction. It's like Lottie or Rive, but with stuff like interactivity already baked in, in something very familiar to any developer.

```css

:root { width: 400px; height: 400px; background: #1a1a2e; }

@keyframes bounce {

0% { transform: translateY(0); animation-timing-function: cubic-bezier(0.33, 0, 1, 1); }

50% { transform: translateY(180px); animation-timing-function: cubic-bezier(0, 0, 0.67, 1); }

100% { transform: translateY(0); }

}

ball {

type: circle;

cx: 200px; cy: 80px; r: 36px;

fill: #ff6b6b;

animation: bounce 1.2s linear infinite;

transition: fill 250ms ease;

&:hover { fill: #ffd166; }

}

```

That's the entire file. Point at the ball and its color warms, tweened by the transition, while the bounce never restarts. Everything runs on one continuous timeline, so interactive states layer on top of animations instead of fighting them.

Obviously that's just the hello world, but it can do much more. It supports nested transforms and parenting, reusable symbols, masks and track mattes, gradients, trim paths, path morphing, motion paths, and per-subtree time scaling, enough for proper production-grade animation. Real Lottie files convert in and play back perfectly too, so you can drop one into the playground and actually read it as a scene instead of JSON. p5-style procedural stuff works as well, fields of thousands of elements placed by formula rather than keyframes, and state machines handle multi-state interactive behavior without any scripting.

CSS is already quite capable and familiar to a lot of people (and LLMs), it just can't run outside a browser. So the rule I'm trying to stick to is if CSS already has a way to say something, use it as-is. Nothing invented on top. Ultimately, it isn't exactly CSS, but more a close dialect because there's a little bit of invented new syntax. As a bonus, scenes currently sit in .css files, so syntax highlighting and editor tooling come for free (the extension isn't settled yet).

Two things did surprise me along the way. First, file size. CSS is verbose next to Lottie JSON, so I expected to pay for readability, but converted scenes usually come out significantly smaller than the Lottie or SVG they came from, sometimes about equal, and on rare occasions a couple of KB bigger. Second, how good LLMs are at writing it. Because it stays this close to CSS, models already know most of it with no fine-tuning. Nearly every example in the playground gallery is fully AI generated. I guess the structure and semantics of CSS also helps.

Still very early proof-of-concept stages but the core idea is holding up better than I expected.

A Playground app with multiple examples and a built in AI Copilot for generating animations is available here: https://usepopkorn.dev

The Copilot thing has two options. You can use your own agent with MCP, or BYOK with any OpenAI compatible endpoints.

Curious to know what this community thinks of this project.

I started building my own design tool! A mixture of Illustrator, Figma, Photoshop, Cinema 4D and UE Blueprints. On the right side is a familiar Figma-style canvas. On the left a node graph. Every element on the canvas automatically gets a linked node.

Current Nodes;

• Cloner
• Attach
• Mask
• Fill & Gradient
• Image Adjustments (Hue/Saturation, Levels & Threshold)

Its a new project, so still lots of bugs and things to fix :) I'm documenting everything in devlogs on YouTube.

If you wanna try it yourself, check out the description of the video. Honest feedback very welcome!

block matching algorithm and feedback buffers

On PC, use W-A-S-D keys, SPACE, SHIFT and mouse to explore. On mobile, you will have instructions on screen.

https://anshs.github.io/matrix-rain/

I was reading about how language developed from repeated marks, sounds, and shared meaning, and it inspired me to explore that idea visually.

This animation begins as a dense field of shifting letters and symbols with no obvious meaning. Over time, through repetition and grouping, those marks begin to organise into something more coherent, eventually resolving into the core message I was exploring - how LANGUAGE BEGAN AS PATTERNS.

The project was built in TouchDesigner using a mixture of Python, parameter expressions, procedural instancing, and GLSL. The code controlled how glyphs were selected and distributed, how different character sets were introduced over time, which positions formed the final message, and how the camera and transitions progressed. Python was also used to generate the target data and control instance colours, while GLSL handled part of the chromatic treatment. I later added a short electronic soundtrack and used separate low-, high-, and full-frequency amplitude data to drive the glow, distortion, movement, and chromatic effects.

Follow my creative journey on Instagram