tbsui

UI Library with Reactive Animations

Usually when we look at animated content on the web, it is driven by time or discrete state events. This library provides a UI framework and tools built for reactive animations which can be driven by any observable aciton -- scroll position, drag position, time, or others. This library builds on top of framer-motion.

This library also provides numerous common components such as modals, cards, and navigation bars which are provided as minimal blank slates with only the necessary styling. It is assumed that on the target site, CSS variables will be set to configure the look of this library.

Check out the component library on [storybook](https://thebigsasha.github.io/responsive)

[See the library](https://thebigsasha.github.io/responsive "Storybook")

Used in production

See this library in action at [bsculpture.com](https://bcsculpture.com), [sasharesume.com](https://www.sasharesume.com), [sashaphoto.ca](https://sashaphoto.ca) and more!

SSR and Zero-JS components

This library focuses on complex, interactive, animated components, almost all of which must `"use-client"`. For simpler, SSR friendly components, check out [tbsui-ssr](https://www.npmjs.com/package/tbsui-ssr)

Install the library

• NPM: npm i --save tbsui
• Yarn: yarn add tbsui
• PNMP: pnpm i tbsui

Reactive Animations

Reactive animations (all components named `Reactive * .tsx`) are driven by framer-motion's Motion Values. All Reactive components in this library assume an input range of `0 -> 1`.

Advanced Motion Value Transforms

Similarly to Framer Motion's builtin `useTransform` hook, this library provides several advanced transforms which allow motion values to be much more useful. These hooks can be powerfully paired with their corresponding `curve editors` to allow visual real-time design and tuning of animations, right in place.

[Keyframe Curve Transform](https://thebigsasha.github.io/responsive/iframe.html?args=&id=utils-keyframe-curve-editor--modal-editor&viewMode=story)

`useKeyframeCurveTransform` allows the user to animate based on motion values in the same way they would in any popular animation software.

[Bezier Curve Transform](https://thebigsasha.github.io/responsive/iframe.html?args=&id=utils-bezier-editor--motion-value-hook&viewMode=story)

`useBezierTransform` which, with it's novel density histogram UI let's designers stretch and squeeze the relative duration of parts of an animation. For instance, the bezier curve could be made to squeeze the majority of the points towards the end of the animation, resulting in a fast move through the first values, and then a lingering move near the end.