u/EagleRepulsive2877

Got tired of scattering interaction logic across 5 different files in React, so I built a "behavior-first" UI runtime. Looking for collaborators! ✦

Hey everyone! I’m building Nagare, an open-source runtime that unifies styling (Tailwind/CSS), animation, state, and JS logic into a single block called a "Soul".

Instead of managing ternary states in your JSX and bouncing between event handlers and CSS, you define the behavior in one place. Your JSX stays 100% clean.

"use client" import { useSoul } from "@nagarejs/react"

export default function Component() { useSoul((soul) => { soul("button-soul") .default({ tw: "px-4 py-2 bg-blue-600 text-white rounded", state: { active: false } }) .click({ onStart: { css: `@if active { transform: scale(0.95); }`, js: function(this: any) { this.state.active = !this.state.active; } }, onEnd: { css: `transform: scale(1);` } }) })

return <button data-soul="button-soul">Click Me</button> }

🛠️ Tech stack: TypeScript, React, Vite. 🚀 Current status: Core engine works, but I'm looking for people who want to help build:

Vue / Svelte adapters

Better event listener cleanups

More built-in detectors (like swipe, drag, or idle)

I don't have a massive network, so I'm looking for curious frontend devs who want to collaborate, roast my architecture, or help shape the API.

https://nagare-nu.vercel.app

reddit.com
u/EagleRepulsive2877 — 16 hours ago
▲ 5 r/npm+2 crossposts

Looking for feedback on a frontend behavior library I've been building

Hey everyone!

I've been building a frontend library focused on UI behaviors called Nagare (流れ), and I'd really appreciate some honest feedback from other developers.

The idea is simple: instead of splitting a single interaction across CSS, Tailwind classes, event handlers, animation libraries, and state management, everything for that interaction lives in one place.

Example:

soul("button") .hover({ onStart: { tw: "scale-105 shadow-xl", css: `border-radius: 20px`, js: function () { console.log("hovered") } }, onEnd: { tw: "scale-100 shadow-none", css: `border-radius: 12px` } })

Each behavior (hover, click, tap, longpress, swipe, drag, scroll, onVisible, onIdle, networkChanged, etc.) can contain:

  • "tw" for Tailwind classes
  • "css" with inline "@if/@else"
  • "js" for custom logic
  • shared state, templates, presets, delays, and more

I'm not trying to replace React or Tailwind—Nagare is focused on giving interactions a single home.

I'd really love feedback on:

  • Does the API feel intuitive?
  • Is this something you'd actually use?
  • What feels unnecessary or confusing?
  • What would you change before a stable release?

Repository: https://github.com/Mizumi25/nagare

Showcase: https://nagare-nu.vercel.app/

npm: https://www.npmjs.com/package/@nagarejs/react

I'm mainly looking for honest criticism, not compliments. Thanks!

u/EagleRepulsive2877 — 5 days ago