`@geenius/motion`

Shared motion tokens, React and SolidJS runtime wrappers, and CSS fallback presets for Geenius package surfaces.

@geenius/motion is a UI-focused package family, so it intentionally ships shared, React, React CSS, SolidJS, and SolidJS CSS variants without a Convex backend package.

Install

pnpm add @geenius/motion react react-dom

For SolidJS consumers:

pnpm add @geenius/motion solid-js

Shared Configuration

import { configureMotion } from "@geenius/motion"

configureMotion({
  reducedMotion: "user",
})

Set reducedMotion to "always" to force static rendering in the package components, or "never" to ignore the user's browser preference.

Import Paths

import { EASING, SPRING, configureMotion } from "@geenius/motion"
import { MotionConfig } from "@geenius/motion/shared"
import { PageTransition, FadeIn } from "@geenius/motion/react"
import { PageTransition as CssPageTransition } from "@geenius/motion/react-css"
import { PageTransition as SolidPageTransition } from "@geenius/motion/solidjs"
import { PageTransition as SolidCssPageTransition } from "@geenius/motion/solidjs-css"

Usage

Shared Tokens

import { SPRING } from "@geenius/motion"

const panelSpring = SPRING.gentle

Reduced Motion Policy

import { configureMotion } from "@geenius/motion"

configureMotion({
  reducedMotion: "always",
})

React Runtime

import { FadeIn, PageTransition } from "@geenius/motion/react"

export function Dashboard({ routeKey }: { routeKey: string }) {
  return (
    <PageTransition routeKey={routeKey}>
      <FadeIn>
        <section>Revenue summary</section>
      </FadeIn>
    </PageTransition>
  )
}

React CSS Fallback

import { FadeIn, PageTransition } from "@geenius/motion/react-css"

export function MarketingPage() {
  return (
    <PageTransition routeKey="pricing">
      <FadeIn>
        <section>Static CSS-backed motion</section>
      </FadeIn>
    </PageTransition>
  )
}

SolidJS Runtime

import { FadeIn, PageTransition } from "@geenius/motion/solidjs"

export function Dashboard(props: { routeKey: string }) {
  return (
    <PageTransition routeKey={props.routeKey}>
      <FadeIn>
        <section>Revenue summary</section>
      </FadeIn>
    </PageTransition>
  )
}

SolidJS CSS Fallback

import { FadeIn, PageTransition } from "@geenius/motion/solidjs-css"

export function MarketingPage() {
  return (
    <PageTransition routeKey="pricing">
      <FadeIn>
        <section>Static CSS-backed motion</section>
      </FadeIn>
    </PageTransition>
  )
}

Storybook

Local review apps live in apps/storybook-react and apps/storybook-solidjs. Both surfaces compare the runtime and vanilla CSS variants side by side.

Build static review bundles from the package root:

pnpm build:storybook-react
pnpm build:storybook-solidjs

Run the interactive review apps locally:

pnpm dev:storybook-react
pnpm dev:storybook-solidjs

The default local URLs are:

React review app: http://localhost:3080
SolidJS review app: http://localhost:3081

Security

See SECURITY.md for the vulnerability reporting process.

License

MIT. See LICENSE.