Skip to content


<MouseParallax /> is a component that allows you to easily create a parallax effect. The camera will update automatically according to the mouse position.


You only need to import it and add it to your template as <MouseParallax />. Additionally, you can pass the following props:

factor is a number to increase the movement range of the camera. ease is a number that smoothes the movement. You can also disable the effect with the disabled prop.

local is a boolean that enables movement based on the position of the mouse on the element rather than the window.

<script setup lang="ts">
import { TresCanvas } from '@tresjs/core'
import { MouseParallax, TorusKnot } from '@tresjs/cientos'

  <TresCanvas clear-color="#82DBC5">
      :position="[0, 0, 7.5]"
      <TresMeshNormalMaterial />


disabledEnable or disable the effectfalse
factorIncrease the range of the parallax2.5
easeIncrease the camera movement speed0.1
localWhether the mouse coordinates are calculated from the element or the windowfalse