UI Motion Workflow: An Open-Source Orchestration Layer for Motion-Aware Frontend Work

Bernard GRENAT — Fri, 26 Jun 2026 08:38:30 +0000

Most AI coding agents can generate polished UI.

That does not automatically mean the result feels orchestrated.

In practice, a lot of agent-assisted frontend work still breaks down in the same way:

the visual direction is unclear
motion is added too early or too randomly
the wrong component provider is chosen for the job
the final result is not validated in the browser with enough rigor

That gap is why I open-sourced ui-motion-workflow.

It is not another component library.
It is not a visual generator.
It is an orchestration layer for motion-aware frontend work.

The Problem

When teams work with coding agents on React or frontend surfaces, they often end up with a strange middle ground:

the page looks "better"
individual sections may be polished
animation exists
but the overall experience still feels disconnected

The issue is usually not raw implementation capability.

The issue is sequencing.

For motion-heavy or motion-aware UI work, there are at least four distinct responsibilities:

define the interface direction and motion intent
choose the right provider or motion strategy
integrate it cleanly into the host codebase
validate the real behavior in the browser

Too often, those steps get collapsed into one prompt.

What `ui-motion-workflow` Does

ui-motion-workflow helps an agent decide the order of work before it starts changing the UI.

At a high level, the workflow is:

read the host surface and understand the product goal
decide whether the request needs direction first, implementation first, or validation first
select the right provider based on the actual motion need
implement without breaking the host codebase's logic or style
validate the final result in a real browser
iterate until the motion feels intentional instead of decorative

The workflow is agent-agnostic by design.

The first reference implementation is Codex-first, but the project also documents adapters for Claude Code, Cursor, and VS Code-style environments.

It Orchestrates Providers Instead of Replacing Them

One of the core ideas behind the project is simple:

the best result does not come from forcing one provider into every situation.

Instead, ui-motion-workflow treats providers by role:

ui-ux-pro-max for visual direction and motion tone
react-bits for expressive, high-impact React motion components
magicui for polished product-friendly animated UI blocks
motion-primitives for lower-level motion patterns embedded into local components

That distinction matters.

For example:

a bold marketing hero may benefit from react-bits
a more system-like animated card or product surface may fit magicui
a subtle reveal, sequencing pattern, or local state-driven transition may fit motion-primitives

The workflow's job is not to "prefer novelty."

Its job is to choose the right tool for the right part of the surface.

A Concrete Before/After Case

One of the most useful ways to test the idea was on a real product surface: Seryvon.

The "before" version already looked strong and had clearly benefited from good UI work.
But the "after" version produced through the orchestrated pass felt stronger for a specific reason:

it read like a guided product argument instead of a set of parallel polished sections.

The improvements were not about adding more effects.
They were about better sequence and intent:

a clearer hero hierarchy
more legible CTA prioritization
better proof framing in the audit panel
more controlled section pacing
restrained, staged motion that supported reading order

That distinction is subtle, but it is exactly where orchestration starts to matter.

Why Browser Validation Is Part of the Workflow

One thing I wanted to make explicit in this project is that source-level changes are not enough.

Motion work especially needs browser validation because:

spacing, hierarchy, and motion rhythm change once rendered
desktop and mobile can reveal different pacing issues
hover states and staged reveals only make sense in context
a page can look correct in code while still feeling off in reality

That is why browser validation is not a bonus step in ui-motion-workflow.

It is part of the contract.

Why Open Source

I wanted the public core to stay generic and reusable.

That means the repository is intentionally not tied to a private studio workflow, a single provider, or a single runtime.

The public version focuses on:

the orchestration model
provider selection logic
implementation adapters
browser-validation discipline

That makes it easier for other teams to adapt it to their own AI coding environment.

Where the Project Goes Next

This first release is a foundation.

The next useful steps are:

more real-world host project examples
stronger install and onboarding guidance per environment
more before/after studies
tighter adapter patterns for non-Codex environments

Try It

If you work with AI coding agents and care about frontend quality, motion intent, and browser-level polish, that is the exact audience for this project.

Repo:

https://github.com/powehi-eu/ui-motion-workflow

Release:

https://github.com/powehi-eu/ui-motion-workflow/releases/tag/v0.1.0

I would be especially interested in feedback from people building with Codex, Cursor, Claude Code, and React-heavy product surfaces.

How C2PA Could Certify AI-Generated Texts (and Why Education Needs It)

Bernard GRENAT — Sun, 22 Jun 2025 15:11:23 +0000

🧠 The Challenge: Tracing AI-Generated Texts

LLMs like GPT-4, Claude, or Gemini generate text that's indistinguishable from human writing. Classic detection tools based on classifiers or style patterns are increasingly unreliable.

Enter C2PA — a cryptographic provenance standard backed by Adobe, Microsoft, Intel, and others.

🧾 Originally built for images and video, C2PA could soon be used to sign documents, proving:

Who authored it (or what model did),
When it was generated,
And how it was modified (if at all).

🔐 What Is C2PA, Really?

C2PA = Coalition for Content Provenance and Authenticity. It's an open standard that lets tools attach signed manifests to files (images, videos... and maybe text).

A manifest is a signed JSON like this:

{
  "@context": "https://schema.c2pa.org",
  "type": "c2paManifest",
  "assertions": [
    { "type": "generatedWithAI", "generator": "OpenAI GPT-4" },
    { "type": "author", "email": "student@university.edu" }
  ],
  "hash": "b0f3ac12e1...",
  "signature": "MEUCIQD5lQ..."
}

🧱 Who's Building It?

🔧 Industry
Adobe: Content Authenticity Initiative
OpenAI: Manifest embedding via API
Anthropic: Model fingerprinting per user
Meta AI: Token-level watermarking
Microsoft & Intel: Core C2PA contributors

🧪 Research
NIST (US): Trusted provenance frameworks
EleutherAI / LAION: Manifests in open datasets
W3C: Verifiable Credentials integration

⚠️ What Could Go Wrong?
🕳️ Signatures break if the text is edited.

📋 Users can copy/paste to bypass metadata.

🧑‍🎓 Students may remove the manifest or submit screenshots.

➡️ That’s why hashing per paragraph, Merkle trees, or block-based manifests are being explored.

Also, privacy matters: identities must be pseudonymized and revocable under GDPR.

🎓 What About Education?
In schools and universities, C2PA could:

Sign every AI-generated output from official tools (ChatGPT, Copilot, etc.).

Automatically verify signatures in LMS platforms (like Moodle or Google Classroom).

Help distinguish honest AI use vs. hidden misuse.

But remember: absence of a manifest ≠ human authorship.

It should be part of a bigger trust toolkit (interviews, writing style comparison, student history…).

🔬 What's Next?
🧭 Research directions:

Store manifests on blockchains for auditability
Combine with statistical AI detectors
Use differential signing for text variants
Enable deferred signatures on submission (e.g., via LMS timestamping)

✅ TL;DR
What? C2PA for text signing
Who? Adobe, Microsoft, OpenAI, NIST, etc.
Why? To trace LLM-generated documents
How? JSON-LD manifest + digital signature
Works with? PDF, DOCX, HTML, Markdown
Still missing? Full browser support, strong privacy layer

✍️ About author :

Powehi is an independent, ethical web agency based in Lyon (France).
We help small organizations build an online presence that rivals the big players — without selling out.

🧾 Contact : https://powehi.eu
📫 contact@powehi.eu

DEV Community: Bernard GRENAT