emulsion

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);
}
`;

export const defaultVertex = glsl`
  varying vec2 vUv;
  void main() {
      vUv = uv;
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 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>
  )
}