@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 { MotionProvider, PageTransition, FadeIn, useMotionConfig } from "@geenius/motion/react"
import { MotionProvider as CssMotionProvider, PageTransition as CssPageTransition } from "@geenius/motion/react-css"
import { MotionProvider as SolidMotionProvider, PageTransition as SolidPageTransition } from "@geenius/motion/solidjs"
import { MotionProvider as SolidCssMotionProvider, 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",
})

Scoped Provider Override

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

function MotionStatus() {
  const config = useMotionConfig()
  return <span>{config.reducedMotion}</span>
}

export function ReducedMotionPreview() {
  return (
    <MotionProvider config={{ reducedMotion: "always" }}>
      <MotionStatus />
      <FadeIn>
        <section>Rendered without runtime motion.</section>
      </FadeIn>
    </MotionProvider>
  )
}

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, plus colocated React story files for the public preset and page-transition exports. 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

FSL package. See LICENSE for the FSL-1.1-Apache-2.0 terms.