`@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 type { 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>
  )
}

Review Surfaces

The package repository includes React and SolidJS review surfaces that compare the runtime and vanilla CSS variants side by side. There is no separate public Storybook deployment for this package today, so local review uses the package scripts from the repository root:

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

Repository: github.com/geenius-dev/geenius-motion

Security

See SECURITY.md for the vulnerability reporting process.

License

MIT. See LICENSE.