---
url: /examples/basics/play-pause.md
description: >-
Start and stop rendering on pointer enter and leave to control an animation
loop.
---
::: example-editor
```ts
import { glCanvas } from "@radiancejs/gl";
import "./styles.css";
const { play, pause, canvas, onAfterRender } = glCanvas({
canvas: "#glCanvas",
fragment: /* glsl */ `
varying vec2 uv;
uniform float uTime;
#define RADIUS .1
void main() {
vec2 circleCenter = vec2(cos(uTime * .8) * .25 + .5, sin(uTime * .8) * .25 + .5);
float circleMask = 1. - smoothstep(RADIUS*.99, RADIUS*1.01, length(uv - circleCenter));
float gradient = 1. - length(uv - RADIUS - circleCenter) / (RADIUS * 2.);
vec3 color = mix(vec3(0.1, 0.6, 0.4), vec3(0.41, 0.98, 0.84), gradient) * circleMask;
gl_FragColor = vec4(color, 1.);
}
`,
uniforms: {
uTime: ({ time }) => time / 500,
},
immediate: false,
});
const renderCount = document.querySelector("#renderCount")!;
onAfterRender(() => {
renderCount.firstChild!.nodeValue = `${Number(renderCount.textContent) + 1}`;
});
canvas.addEventListener("pointerenter", play);
canvas.addEventListener("pointerleave", pause);
```
```css
html {
color-scheme: light dark;
}
body {
margin: 0;
height: 100svh;
display: grid;
place-items: center;
}
canvas {
width: min(90svmin, 900px);
aspect-ratio: 1;
display: block;
border-radius: 8px;
border: 1px solid rgb(128 128 128 / 0.4);
}
```
```html
RadianceJS Example
Renders: 0
```
:::