3DTilt

3DTilt is a React component that adds a 3D tilt effect to any element. It offers various customization options to fine-tune the effect, including tilt angles, perspective, transition speed, and optional glare effects.

Installation

You can install the 3DTilt package using npm or Yarn.

npm

npm install 3DTilt

yarn

yarn add 3DTilt

Usage

Basic Example

import React from 'react';
import ThreeDTilt from '3dtilt';

const BasicExample = () => {
  return (
    <ThreeDTilt>
      <div style={{ padding: '50px', background: 'lightblue', borderRadius: '10px' }}>
        <h1>Basic 3D Tilt</h1>
      </div>
    </ThreeDTilt>
  );
};

export default BasicExample;

Options

| Option Name | Type | Default Value | Description | |------------------|---------------|--------------------------------------------|-----------------------------------------------------------------------------| | maxTilt | number | 20 | The maximum tilt angle in degrees. | | perspective | number | 300 | The perspective distance in pixels. | | easing | string | 'cubic-bezier(.03,.98,.52,.99)' | The CSS easing function for transitions. | | scale | number | 1 | The scaling factor applied to the element when tilted. | | speed | number | 400 | The speed of the transition in milliseconds. | | transition | boolean | true | Determines whether transitions should be used. | | disableAxis | 'x' | 'y' | null | null | Disables tilting along the specified axis. | | reset | boolean | true | Resets the tilt effect when the mouse leaves the element. | | glare | boolean | false | Adds a glare effect to the element. | | maxGlare | number | 1 | The maximum opacity of the glare effect. | | glarePrerender | boolean | false | Determines whether the glare effect is prerendered. |

Options and Separate Examples

1. maxTilt (number)

The maximum tilt angle in degrees.

Default: 20

import React from 'react';
import ThreeDTilt from '3dtilt';

const MaxTiltExample = () => {
  return (
    <ThreeDTilt options={{ maxTilt: 40 }}>
      <div style={{ padding: '50px', background: 'lightgreen', borderRadius: '10px' }}>
        <h1>Max Tilt: 40°</h1>
      </div>
    </ThreeDTilt>
  );
};

export default MaxTiltExample;

2. perspective (number)

The distance from the viewer to the element, which affects the depth of the 3D effect.

Default: 300

import React from 'react';
import ThreeDTilt from '3dtilt';

const PerspectiveExample = () => {
  return (
    <ThreeDTilt options={{ perspective: 1000 }}>
      <div style={{ padding: '50px', background: 'lightcoral', borderRadius: '10px' }}>
        <h1>Perspective: 1000px</h1>
      </div>
    </ThreeDTilt>
  );
};

export default PerspectiveExample;

3. easing (string)

The CSS easing function for the transition effect.

Default: 'cubic-bezier(.03,.98,.52,.99)'

import React from 'react';
import ThreeDTilt from '3dtilt';

const EasingExample = () => {
  return (
    <ThreeDTilt options={{ easing: 'linear' }}>
      <div style={{ padding: '50px', background: 'lightsalmon', borderRadius: '10px' }}>
        <h1>Easing: Linear</h1>
      </div>
    </ThreeDTilt>
  );
};

export default EasingExample;

4. scale (number)

The scaling factor applied to the element when it is tilted.

Default: 1

import React from 'react';
import ThreeDTilt from '3dtilt';

const ScaleExample = () => {
  return (
    <ThreeDTilt options={{ scale: 1.2 }}>
      <div style={{ padding: '50px', background: 'lightyellow', borderRadius: '10px' }}>
        <h1>Scale: 1.2</h1>
      </div>
    </ThreeDTilt>
  );
};

export default ScaleExample;

5. speed (number)

The speed of the transition in milliseconds.

Default: 400

import React from 'react';
import ThreeDTilt from '3dtilt';

const SpeedExample = () => {
  return (
    <ThreeDTilt options={{ speed: 1000 }}>
      <div style={{ padding: '50px', background: 'lightpink', borderRadius: '10px' }}>
        <h1>Speed: 1000ms</h1>
      </div>
    </ThreeDTilt>
  );
};

export default SpeedExample;

6. transition (boolean)

Determines whether transitions should be used.

Default: true

import React from 'react';
import ThreeDTilt from '3dtilt';

const TransitionExample = () => {
  return (
    <ThreeDTilt options={{ transition: false }}>
      <div style={{ padding: '50px', background: 'lightgray', borderRadius: '10px' }}>
        <h1>Transition: Disabled</h1>
      </div>
    </ThreeDTilt>
  );
};

export default TransitionExample;

7. disableAxis (string or null)

Disables tilt on the 'x' or 'y' axis.

Default: null

import React from 'react';
import ThreeDTilt from '3dtilt';

const DisableAxisExample = () => {
  return (
    <ThreeDTilt options={{ disableAxis: 'x' }}>
      <div style={{ padding: '50px', background: 'lightcyan', borderRadius: '10px' }}>
        <h1>Disable Axis: X</h1>
      </div>
    </ThreeDTilt>
  );
};

export default DisableAxisExample;

8. reset (boolean)

Resets the tilt effect when the mouse leaves the element.

Default: true

import React from 'react';
import ThreeDTilt from '3dtilt';

const ResetExample = () => {
  return (
    <ThreeDTilt options={{ reset: false }}>
      <div style={{ padding: '50px', background: 'lightgoldenrodyellow', borderRadius: '10px' }}>
        <h1>Reset: Disabled</h1>
      </div>
    </ThreeDTilt>
  );
};

export default ResetExample;

9. glare (boolean)

Adds a glare effect to the element.

Default: false

import React from 'react';
import ThreeDTilt from '3dtilt';

const GlareExample = () => {
  return (
    <ThreeDTilt options={{ glare: true }}>
      <div style={{ padding: '50px', background: 'lightskyblue', borderRadius: '10px' }}>
        <h1>Glare: Enabled</h1>
      </div>
    </ThreeDTilt>
  );
};

export default GlareExample;

10. maxGlare (number)

The maximum opacity of the glare effect.

Default: 1

import React from 'react';
import ThreeDTilt from '3dtilt';

const MaxGlareExample = () => {
  return (
    <ThreeDTilt options={{ glare: true, maxGlare: 0.5 }}>
      <div style={{ padding: '50px', background: 'lightsteelblue', borderRadius: '10px' }}>
        <h1>Max Glare: 0.5</h1>
      </div>
    </ThreeDTilt>
  );
};

export default MaxGlareExample;

11. glarePrerender (boolean)

Determines whether the glare effect is prerendered.

Default: false

import React from 'react';
import ThreeDTilt from '3dtilt';

const GlarePrerenderExample = () => {
  return (
    <ThreeDTilt options={{ glare: true, glarePrerender: true }}>
      <div style={{ padding: '50px', background: 'lightseagreen', borderRadius: '10px' }}>
        <h1>Glare Prerender: Enabled</h1>
      </div>
    </ThreeDTilt>
  );
};

export default GlarePrerenderExample;

License

This project is open-source and available under the MIT License.