Klipp 📹

A camera toolkit for the web, inspired by Unity Cinemachine. Describe the shots you want, and klipp picks the right one and blends between them.

The core runs anywhere, with no renderer or framework attached. Integrations are thin layers on top: three.js and React Three Fiber today, with more to come, like TresJS.

npm install @kvvasuu/klipp

⚠️ Early-stage, experimental - the API may change.

Core

import { Klipp, FollowBody, HardLookAtAim, targetPose } from '@kvvasuu/klipp';

const klipp = new Klipp();
const player = targetPose.create(); // keep player.position up to date

const follow = klipp.addCamera('follow', { priority: 10 });
follow.body = new FollowBody(player, { offset: [0, 3, 8], damping: 0.5 });
follow.aim = new HardLookAtAim(player);

// every frame
klipp.update(dt);
engineCamera.setPosition(klipp.shot.position);
engineCamera.setRotation(klipp.shot.quaternion);

React Three Fiber

import { Klipp, VirtualCamera, Body, Aim } from '@kvvasuu/klipp/react';

<Klipp>
  <VirtualCamera name="follow" priority={10}>
    <Body.Follow target={playerRef} offset={[0, 3, 8]} damping={0.5} />
    <Aim.HardLookAt target={playerRef} />
  </VirtualCamera>

  <VirtualCamera name="cutscene" priority={20} active={isCutscene}>
    <Body.HardLockToTarget target={[10, 2, 0]} />
    <Aim.HardLookAt target={playerRef} />
  </VirtualCamera>
</Klipp>;

What's inside

• Virtual cameras with priorities, and blending between them.
• Body and Aim: follow, frame or look at targets, or let the user orbit and look around.
• Extension, Noise and Impulse: group framing, lens, and camera shake.
• Debugging: framing zones and camera frustums.

Packages

Entry point	For
@kvvasuu/klipp	The core, built on math.
@kvvasuu/klipp/three	three.js classes, ending in Three.
@kvvasuu/klipp/react	React Three Fiber components.
@kvvasuu/klipp/dom	Mouse, touch and wheel input, and debug overlays.

Links

• Documentation
• Examples