Public API

PreRelease API

ShaderDebug
isMotionValue
motionValueArray
useConstant
useLog
useMotionValueArray
useOnChange
useSmooth
PI
aastep
aspect
defaultVertex
filmGrain
glsl
hsv2rgb
luma
noise
osc
rand
repeat
rotateUV
snoise
BasicShaderMesh
Downloader
useDownloadCanvas
useResolution
useMidiCallback
useMidiValue
useMotionUniforms
const fragmentShader = glsl`
uniform float time;
varying vec2 vUv;

void main() {
  vec2 uv = vUv;
  vec3 color = vec3(sin(uv.x * 10. + time * 0.001));

  gl_FragColor = vec4(vec3(color),1.0);
}
`;
import "./styles.css"
import { useTime } from "framer-motion"
import { useMotionUniforms } from "emulsion"
import { defaultVertex, glsl, BasicShaderMesh } from "emulsion/pre"
import { Canvas } from "@react-three/fiber"

const fragmentShader = glsl`
uniform float time;
varying vec2 vUv;

void main() {
  vec2 uv = vUv;
  vec3 color = vec3(sin(uv.x * 10. + time * 0.001));

  gl_FragColor = vec4(vec3(color),1.0);
}
`;

function Sketch() {
    const time = useTime()
    const uniforms = useMotionUniforms({ time })

    return (
        <BasicShaderMesh
            args={{
                fragmentShader,
                vertexShader: defaultVertex,
                uniforms,
            }}
        />
    )
}


export default function App() {
  return (
      <Canvas resize={{ offsetSize: true }}>
        <Sketch />
      </Canvas>
  )
}