dmonphx

0 Followers · 0 Following

• Joined on 2026-02-19

Repositories Projects Packages Public Activity Starred Repositories

@phoenix-tekhne/kinesis (1.1.0)

Published 2026-05-28 07:21:12 -07:00 by dmonphx

Installation

Set up this registry in your project .npmrc file:

@phoenix-tekhne:registry=https://gitrepo.cstudiosinc.com/api/packages/dmonphx/npm/

To install the package using npm, run the following command:

npm install @phoenix-tekhne/kinesis@1.1.0

or add it to the package.json file:

"@phoenix-tekhne/kinesis": "1.1.0"

For more information on the npm registry, see the documentation.

About this package

/**

• Kinesis Motion System - Intensity Level 3 (Professional Dynamic)
• This documentation has been created as part of the Phoenix Tekhne v2 monorepo.

• What Is Kinesis?

• Kinesis is Phoenix Inceptions' motion system, providing enterprise-grade,
• mobile-optimized animations with full per-app customization.

• Key Features

• • Intensity Level 3: Professional Dynamic (default for Phoenix Incepts brand)
• • Mobile-First: Maximum 250ms animations on mobile, GPU-optimized
• • Per-App Customization: Each app can adjust motion behavior
• • Framework Support: Works with Next.js, Remix, React Native, Electron
• • Performance: Bundle size <8KB, optimized animations
• • Accessibility: Respects reduced motion preferences

• Intensity Levels

• | Level | Duration | Scale | Use Case |
• |-------|----------|-------|----------|
• | 1 | 100ms | 1.01 | Micro-interactions only |
• | 2 | 150ms | 1.015 | Subtle professional |
• | 3 | 200ms | 1.025 | Professional Dynamic (default) |
• | 4 | 250ms | 1.035 | Expressive engaging |
• | 5 | 300ms | 1.05 | Showcase bold |

• Package Structure

• @phoenix-tekhne/react-kinesis/
• ├── tokens/ # Motion tokens and configuration
• ├── animations/ # Animation presets (Button, Card, Grid)
• ├── components/ # Kinesis-enabled components
• ├── hooks/ # Motion hooks (useKinesis, etc.)
• └── stories/ # Storybook stories

• Usage in Applications

• import { KinesisButton } from '@phoenix-tekhne/react-kinesis';
• // Default (Intensity Level 3)
• Click Me
• // Custom intensity
• Bold Motion
• // Custom configuration
• <KinesisButton config={{ durationMultiplier: 1.2 }}>
• Custom Animation

• Mobile Optimization

• • Max duration: 250ms for mobile
• • GPU-accelerated (transform, opacity only)
• • Respects reduced motion preferences
• • Bundle size: <3KB for mobile-optimized build

• Documentation

• • Storybook: pnpm run dev -w @phoenix-tekhne/storybook
• • Wiki: Gitea wiki for comprehensive documentation

• Next Steps

• 1. Review motion intensity level (currently 3 - Professional Dynamic)
• 2. Configure per-app motion in apps/*/src/motion.config.ts
• 3. Test across all frameworks (Next.js, Remix, React Native, Electron)
• For more details, see AGENTS.md and ARCHITECTURE.md. */

Dependencies

Dependencies

ID	Version
@phoenix-tekhne/react-tupos	0.3.0
@phoenix-tekhne/tokens	0.3.0
framer-motion	^11.15.0

Development Dependencies

ID	Version
@types/react	^19.2.14
@types/react-dom	^19.2.3
@vitejs/plugin-react	^4.3.4
react	^19.0.0
react-dom	^19.0.0
typescript	^5.9.3
vite	^5.4.21
vite-plugin-dts	^4.5.4

Peer Dependencies

ID	Version
framer-motion	^11.15.0
react	^19.0.0
react-dom	^19.0.0

Details

npm

2026-05-28 07:21:12 -07:00

5

latest

16 KiB

Assets (1)

kinesis-1.1.0.tgz 16 KiB

Versions (1) View all

1.1.0 2026-05-28