Most modern frameworks model UI as a function of state: change state, re-render. but modern rich UX is increasingly about the *space between* states: how to represent a smooth transition between them.

This is often solved by using external libraries like Framer Motion or GSAP. This often means syncing two mental models:

* one for state/render
* one for animation/effects

I am building TargetJS to experiment with a different model: State as a Destination.

Instead of immediately setting a state, you declare a **target** for the framework to reach. The transition from A → B is a first-class concept.

**Example: Animate width/height, then change color, then log a message.**

**The React + GSAP approach**

    import React, { useLayoutEffect, useRef } from "react";
    import gsap from "gsap";
    export default function TargetBox() {
      const box = useRef(null);
      useLayoutEffect(() => {
        const ctx = gsap.context(() => {
          const timeline = gsap.timeline();
          timeline.to(box.current, { width: 200, height: 200, duration: 0.8 })
          .to(box.current, { backgroundColor: "red", duration: 0.8 })
          .call(() => { console.log("Hello World!");  });
        }, box);
        return () => ctx.revert();
      }, []);
      return (
        <div ref={box}  style={{ width: 100, height: 100, backgroundColor: "blue" }}  />
      );
    }

**The TargetJS Approach (The "Vibe")**

    import { App } from "targetj";
    App({
      backgroundColor: 'blue', // Starts immediately
      width: { value: [100, 200], steps: 100, interval: 8 }, // Starts immediately
      height: { value: [100, 200], steps: 100, interval: 8 }, // Starts immediately
      backgroundColor$$: { value: 'red', steps: 100 }, // $$ defers execution until preceding siblings (width/height) finish
      done$$() { console.log("Hello World!"); } // 3. $$ defers execution until  the background color finish
    }).mount("#app");

\- Animations, API calls, and event handling are treated uniformly. Only one mental model needs to be learned.

\- Implicit lifecycle: Each field and function tracks its own lifecycle and status internally.

\- Deferred ($$): It is more than await. It defers execution until all preceding siblings (and their children) have completed (reached their destination).

\-  Built-in support for looping, delays, and completion callbacks. This makes the code more compact.

\- AI-Optimized Syntax: Ultra-compact syntax, the one mental model, and less scaffolding for async operations, let your AI focus on the vibe.

I am curious how developers find this model.

**Github**: [https://github.com/livetrails/targetjs](https://github.com/livetrails/targetjs)

**Examples**: [https://targetjs.io/examples](https://targetjs.io/examples)

Tired of syncing state and animations? I built a UI framework where state moves toward a destination.