48 |
53 |
68 |
54 |
57 |
59 |
60 |
67 | 
4 |
5 |
4 |
5 |
4 |
5 | | Key | 16 |Behavior | 17 |
|---|---|
| 22 | 23 | {key.key} 24 | 25 | | 26 |{key.behavior} | 27 |
57 | Inherits <{inherits.library.name}.{inherits.name} /> Props.
61 |
53 | Inherited from <{inherits.library.name}.{inherits.name} />.
57 |
29 | Inherits {/* prettier-ignore */}
30 | <{inherits.library.name}.{inherits.name} />
31 | Props.
32 |
| Property | 39 |Default | 40 |Type/Description | 41 |
|---|---|---|
|
46 | 55 | {prop.name} 56 | 57 | |
58 |
59 | {prop.defaultHtml === null ? (
60 | - 61 | ) : ( 62 | 66 | )} 67 | |
68 |
69 | 70 | {prop.type} 71 | 72 | 76 | |
77 |
29 | Inherits {/* prettier-ignore */}
30 | <{inherits.library.name}.{inherits.name} />
31 | Props.
32 |
| Property | 39 |Type/Description | 40 |
|---|---|
|
45 | 54 | {returnProp.name} 55 | 56 | |
57 |
58 | 59 | {returnProp.type} 60 | 61 | 65 | |
66 |
20 | Data attributes present on <{componentName} />{' '}
21 | components.
22 |
28 | CSS properties present on <{componentName} />{' '}
29 | components.
30 |
| Property | 37 |Description | 38 |
|---|---|
|
43 | 44 | {prop.name} 45 | 46 | |
47 | 48 | 49 | | 50 |
{crow}
82 | {
25 | setX(prev => prev + 100 * deltaTime)
26 | })
27 |
28 | function MovingBox() {
29 | return (
30 |
36 | )
37 | }
38 | `} lang='tsx' />
39 |
40 | That is close to how other primitives are made:
41 | number) {
46 | const [pos, setPos] = createSignal(0)
47 | createAnimation(({ deltaTime }) => {
48 | setPos(prev => prev + (velocity?.() ?? 100) * deltaTime)
49 | })
50 | return pos
51 | }
52 |
53 | function MovingBox() {
54 | const x = createLinearMovement()
55 |
56 | return (
57 |
63 | )
64 | }
65 | `} lang='tsx' />
66 |
67 |
68 | Here's the AnimationCallback reference API:
69 | void
74 | `} lang='tsx' />
--------------------------------------------------------------------------------
/web/src/pages/docs/animation/animation-controller.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | layout: '@layouts/Docs.astro'
3 | title: Flexible state management of SolidJS UI primitives
4 | description: Learn how to manage the state of arara UI primitives for SolidJS.
5 | image: https://ararajs.vercel.app/banner.jpg
6 | ---
7 |
8 | import Code from '@components/docs/code/Code.astro'
9 | import H2 from '@components/docs/headings/H2.astro'
10 | import H3 from '@components/docs/headings/H3.astro'
11 | import Features from '@components/docs/Features.astro'
12 | export const components = { h2: H2, h3: H3 }
13 |
14 | # Animation Controller
15 |
16 | The animation controller is the heart of the system. It manages the animation loop using requestAnimationFrame and provides precise timing information to your animations.
17 |
18 | {
37 | console.log(currentTime)
38 | })
39 |
40 |
41 |
42 |
43 | `}
44 | lang="tsx"
45 | />
46 |
47 | Say you want to have two animations running at the same time. You can pass a `controller` as the **second** argument of the `createAnimation` primitive, it will use that instead of creating a new controller.
48 |
49 | {
54 | console.log("FIRST ANIMATION", currentTime)
55 | }, () => controller)
56 | createAnimation(({ currentTime }) => {
57 | console.log("SECOND ANIMATION: ", currentTime)
58 | }, () => controller)
59 | createAnimation(({ currentTime }) => {
60 | console.log("THIRD ANIMATION: ", currentTime)
61 | }, () => controller)
62 |
63 | // These controls will affect all three animations
64 | controller.start()
65 | controller.pause()
66 | controller.stop()
67 | `}
68 | lang="tsx"
69 | />
70 |
71 | Each controller provides:
72 |
73 | - `currentTime` since animation start
74 | - `deltaTime` between frames
75 | - Running state management
76 | - Automatic cleanup on component unmount
77 |
--------------------------------------------------------------------------------
/web/src/pages/docs/animation/body.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | layout: '@layouts/Docs.astro'
3 | title: Flexible state management of SolidJS UI primitives
4 | description: Learn how to manage the state of arara UI primitives for SolidJS.
5 | image: https://ararajs.vercel.app/banner.jpg
6 | ---
7 |
8 | import Link from '@components/docs/Link.astro'
9 | import Code from '@components/docs/code/Code.astro'
10 | import H2 from '@components/docs/headings/H2.astro'
11 | import H3 from '@components/docs/headings/H3.astro'
12 | import Features from '@components/docs/Features.astro'
13 | import RawCode from '@components/docs/code/RawCode.astro'
14 | import ExampleWrapper from '@examples/ExampleWrapper'
15 | import { SineWave2DDemo } from '@examples/sine-wave/SineWave2DDemo'
16 | import RawSineWave2DDemo from '@examples/sine-wave/SineWave2DDemo?raw'
17 | export const components = { h2: H2, h3: H3 }
18 |
19 | # Body
20 |
21 | Bodies are very simple. They are just the AraraJS way of outputting animated signals. In case you are interested in the speed in which your signal is changing, for example, you can access the `velocity` and `acceleration` properties of the `Body` object.
22 |
23 |
62 |
65 |
66 | The 2D and 3D variants use vectors from the gl-matrix library.
67 | > These types `vec2` and `vec3` are exposed to you by directly importing from AraraJS.
68 |
69 | [
57 | sineWavePass()
58 | ])
59 | `} lang='tsx' />
60 |
61 |
76 |
79 |
80 | Using the `BodyAnimationPass` will give you more flexibility because you can input multiple passes in a `createBodyAnimation` and these passes are applied in order. It's easy to combine multiple Sines and Springs with that, which gives you easings and periodic behaviours.
--------------------------------------------------------------------------------
/web/src/pages/docs/getting-started.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | layout: '@layouts/Docs.astro'
3 | title: Getting Started
4 | description: Installation instructions and basic usage of the library.
5 | image: https://ararajs.vercel.app/banner.jpg
6 | ---
7 | import Code from '@components/docs/code/Code.astro'
8 | import H2 from '@components/docs/headings/H2.astro'
9 | import H3 from '@components/docs/headings/H3.astro'
10 | export const components = { h2: H2, h3: H3 }
11 |
12 | # Getting Started
13 | To install the library
14 |
In case you are wondering, AraraJS is using the api `requestAnimationFrame` (RAF) under the hood because it operates exclusively on **signals / javascript** land.
A hybrid WAAPI with RAF approach is being considered for the future.
56 |
57 |
58 | ### Additional thanks
59 | - Jasmin GiyoMoon for the awesome Corvu UI project, which was used as a template for this project.
60 | - Solid Primitives for awesome, high-quality reactivity primitives which make working with SolidJS a breeze
61 | - Ryan Carniato for his highly educational Friday streams!
62 | - The Solid Community for being so welcoming and inspiring!
63 |
--------------------------------------------------------------------------------
/web/src/pages/docs/overview.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | layout: '@layouts/Docs.astro'
3 | title: SolidJS UI primitives and utilities
4 | description: An overview over all ui primitives and utilities arara provides for SolidJS.
5 | image: https://ararajs.vercel.app/banner.jpg
6 | ---
7 | import PrimitivesOverview from '@components/docs/primitives/PrimitivesOverview.astro'
8 | import UtilitiesOverview from '@components/docs/utilities/UtilitiesOverview.astro'
9 | import H2 from '@components/docs/headings/H2.astro'
10 | import H3 from '@components/docs/headings/H3.astro'
11 | export const components = { h2: H2, h3: H3 }
12 |
13 | # Overview
14 |
15 | > TODO: 🏗️ under construction...
16 |
17 | {/* ## Primitives
18 |
19 | arara's growing list of UI primitives for SolidJS. Accessible, customizable and ready to use in your project!
20 |
21 |