--- title: Quickstart description: Install Shaders, render your first effect, and drive a prop from state. icon: rocket category: code --- # Quickstart By the end of this page you'll have a gradient with a cursor trail running in your app, sized with CSS and driven by state. Pick your framework in any code block and every block follows; plain JavaScript works too. ## Installing the package Shaders is one package for every framework: ```bash npm install shaders ``` Import the components from the entry point for your framework: `shaders/vue`, `shaders/react`, `shaders/svelte` or `shaders/solid`. Without a framework, the JavaScript API comes from `shaders/js`. ## Rendering your first effect Let's start with a gradient and put a cursor trail on top of it. Add this component anywhere in your app: ```vue-html ``` ```jsx import { Shader, LinearGradient, CursorTrail } from 'shaders/react' export default function Hero() { return ( ) } ``` ```tsx ``` ```tsx import { Shader, LinearGradient, CursorTrail } from 'shaders/solid' export default function Hero() { return ( ) } ``` ```javascript // import { createShader } from 'shaders/js' const shader = await createShader(document.getElementById('hero'), { components: [ { type: 'LinearGradient', props: { colorA: '#0f172a', colorB: '#7c3aed' } }, { type: 'CursorTrail', props: {} }, ], }) ``` Move your cursor over the canvas to see the trail. `` renders a single ``. The components inside it are **layers**, drawn in order like layers in Figma: the gradient first, then the trail on top. In plain JavaScript you bring the ``, and each entry in `components` is a layer. ## Sizing the canvas The canvas has no size of its own. It takes whatever size you give `` through `class` (`className` in React) or `style`: ```vue-html ``` ```jsx {/* Fill the viewport */} {/* Fixed size */} {/* Full width, 16:9 */} ``` ```tsx ``` ```tsx {/* Fill the viewport */} {/* Fixed size */} {/* Full width, 16:9 */} ``` ```html ``` The canvas resizes itself when its CSS size changes, so you don't need to call anything on resize. Style ``, not the `` inside it: the internal markup can change between releases. In plain JavaScript, call `shader.resize()` if you change the canvas size from script. ## Setting props Each component takes props the same way any component in your framework does. In Vue, attributes are kebab-case and non-string values need the `:` binding; in plain JavaScript they go in each component's `props` object: ```vue-html ``` ```jsx ``` ```tsx ``` ```tsx ``` ```javascript const canvas = document.getElementById('hero') const shader = await createShader(canvas, { components: [ { type: 'LinearGradient', props: { colorA: '#ff6b6b', colorB: '#4ecdc4', angle: 45, colorSpace: 'oklch', }, }, ], }) ``` `colorSpace="oklch"` blends the two colors through a perceptual color space, so the middle of the gradient stays bright instead of going gray. Every component's props, with defaults and ranges, are in the [component docs](/docs/components), and the design editor exports any effect you build as code. ## Driving a prop from state Props accept your framework's state like any other prop. In plain JavaScript, give the component an `id` and pass new props to `shader.update()`. We'll wire the gradient's angle to a range input: ```vue-html ``` ```jsx import { useState } from 'react' import { Shader, LinearGradient } from 'shaders/react' export default function GradientDial() { const [angle, setAngle] = useState(0) return ( <> setAngle(Number(e.target.value))} /> ) } ``` ```tsx ``` ```tsx import { createSignal } from 'solid-js' import { Shader, LinearGradient } from 'shaders/solid' export default function GradientDial() { const [angle, setAngle] = createSignal(0) return ( <> setAngle(Number(e.currentTarget.value))} /> ) } ``` ```javascript // const canvas = document.getElementById('hero') const shader = await createShader(canvas, { components: [ { type: 'LinearGradient', id: 'gradient', props: { colorA: '#ff6b6b', colorB: '#4ecdc4', angle: 0 } }, ], }) document.getElementById('angle').addEventListener('input', e => { shader.update('gradient', { angle: Number(e.target.value) }) }) ``` Drag the slider and the gradient turns on the next frame. Changing `angle` updates a value on the GPU; the effect doesn't recompile. ## Cleaning up The framework components clean up after themselves: when `` unmounts, rendering stops and its GPU memory is freed. In plain JavaScript, call `destroy()` when the canvas leaves the page, for example on a route change in a single-page app: ```javascript shader.destroy() ``` ## Using server rendering Shaders needs a browser with a GPU, so it can't render on the server. Each meta-framework handles this differently: - **Next.js**: put `'use client'` at the top of any file that renders a ``. See [Using Next.js](/docs/guide/ssr#using-nextjs). - **Nuxt**: wrap the `` in ``. See [Using Nuxt](/docs/guide/ssr#using-nuxt). - **SvelteKit**: nothing to do, because `` renders nothing on the server and starts on the client. See [Using SvelteKit](/docs/guide/ssr#using-sveltekit). - **SolidStart**: load the component that renders a `` with `clientOnly`. See [Using SolidStart](/docs/guide/ssr#using-solidstart). ## Next steps - [Composing effects](/docs/guide/composing-effects): stack and nest components, blend and mask layers. - [Layout and positioning](/docs/guide/layout-positioning): place the canvas behind or around your UI. - [Props and reactivity](/docs/guide/props-reactivity): bind state to props and animate them. - [Component docs](/docs/components): every component with a live preview and its props.