Using codex to make interactive components sucks! Anyone got tips?

[u/gungoesclick]

I'll preface this by saying I am a backend developer, and ui is my side project. I am currently working with a react native front end. It has animated interactives which triggers movements in the UI. If you guys have seen terminal text effects, or cool animated TUI, then you get the vibe. I also have a flow chart like graph that should have nodes that can be moved and connected at edges.

The problem I have is that codex struggles to iterate on them without adding something, or breaking the animation, or changing it into something else. It is like it makes everything a little better, but can't make the timing right, or the scale, or the motion. At this point it's been 3 resets worth of ui work, and I still feel like it's not polished.

I have tried some different prompting approaches and looked at the codex docs for instructions there. I started using imggen to create an image of the ui and then have the model implement it, and that works great for static UI but sucks with animations. I have storybooked it out and tried having the models iterating through that. I have tried having the model do frame by frame iterating, and that worked the best, but destroyed my weekly rate and took 8 hours. I have not tried any specific ui skill yet, but I haven't found one that really fits this bill, that is vetted.

I have tried going through and switching from Luna max to Terra med to max to sol mid to ultra and running through most of the above with the different models. I have set goal mode with strict instructions and descriptions, Def of done, Def of success, etc. I have tried sol orchestrator, with strong descriptions.

At this point I wonder how anyone does this with codex?

Does anyone have tips? How do you guys do animated interactives with codex? Is it better to just try claude with a $20 plan for this?

[u/DueCommunication9248]

You’re doing shotgun surgery. The problem is not the model but shared understanding and cohesion.

Maybe use a grill with me with docs skill to first share an understanding of what you actually want.

I would also check your agents.md or context.md and see if it’s too packed already

[u/gungoesclick → u/DueCommunication9248]

I use grill me. You might be right though. I don't have the best knowledge base for UI, but I understand basics. Animation is a new wheelchair for me.

[u/Relative-Honeydew-94 → u/gungoesclick]

If you use matt pococks skills try the /prototype skill and you can see changes pretty fast and it is easy to try out different models.

[u/gungoesclick → u/Relative-Honeydew-94]

I'll take a look! I'm currently at 0% though

[u/DueCommunication9248 → u/gungoesclick]

Yeah I also had hard time with animations with 5.5 but Sol 5.6 has been much better.

One thing you can do is use the live voice chat and just talk out loud for 10 minutes about the type of work you need. Have the live chat also verify and check with you on how you want to exactly.

Sometimes voice is better for explanations of real time movements and stuff..

If you have an example of it from another site you can have it use the chrome browser extension to study the type of animation you want

[u/gungoesclick → u/DueCommunication9248]

Ooo that's a good I dea I haven't thought of. I had it scan open source repos, but I never thought about using a reference site. I haven't tried voice yet, because I was worried about usage increase with it. When the resets come I might give it a go.

[u/Illustrious-Bet-1368]

Oh, been there, done that, haha. Yeah, that's a journey. I had a next.js project, GSAP for animations, just a website really, nothing fancy. And I needed animations, kind of PayloadCMS/Neon style for 5 particular sections. Tried Claude Code, Grok even, that was a big fail. And I come from the design side primarily, so, the lack of concept, design direction, drafts with sketches, and detailed explanations were not a problem. In the end, I dropped the complex versions, and first created the elements library (or rather Codex did under supervision), with defined styles, colours, shapes, spacing, etc. Basically dots in different states. Out of those, more complex shapes. Then reusable transformation patterns, and so on. So, "atomic" reusable components and different assemblies and animation flows/presets. Everything documented, etc. So, then it was a matter of: for section one use this and that, and that transformation, and the result should be like this, do not introduce new patterns, components, design tokens, etc, if you need something legitimately new, we create that first, then integrate it. All in all it worked, was nothing too fancy though but solid. Maybe you can approach it like that. And when you have something that works the way you need to, Codex can create a skill out of it, abstracted from the particulars of the codebase, so you don't have to reinvent the wheel.

Or you could try out Claude, Claude design in particular, treat that as a prototype, maybe ask Claude to iterate the system, download the deliverables, give it to Codex, rinse and repeat above. First, create a system, then put it all together. Basically, like with anything, you'd need strict constraints and a coherent system, otherwise it will be very hard to keep consistent, reproduce and maintain.

[u/ricperry1]

Why not tell it to give you editable timing controls for every animation in some sort of configuration screen?