Kaleidoscope

No-code kaleidoscope effect using attributes powered by Three.js

🔗 Snippet 📝 Setup 👀 Example

Snippet

Copy the <script> and paste it in the <head> tag or before </body>

<!-- Snippets by The Lazy God • Kaleidoscope -->
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/three.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/gh/the-lazy-god/[email protected]/tlg-kaleidoscope.min.js"></script>

Copy snippet

Required setup

Define canvas container(s)
Define image source element(s)

Define canvas container(s)

Add the attribute tlg-kaleidoscope-canvas to any div element you want to contain a kaleidoscope effect. Size the element with height and width to define the size of the kaleidoscope effect.

Attribute

Name

tlg-kaleidoscope-canvas

Copy

Define image source element(s)

Within each canvas container, include one or more image elements with the attribute tlg-kaleidoscope-image. These images will be used in the kaleidoscope pattern. If more than one image element is used a random will be chosen on page load.

Note: You can hide the source images with display:none;

Attribute

Name

tlg-kaleidoscope-image

Copy

Animation mode

Define an animation mode:

Mouse
Loop
Scroll
Static (default)

Mouse interaction

Animate the kaleidoscope effect with mouse or touch move interactions by adding this attribute to the element with attribute tlg-kaleidoscope-canvas

Attribute

Option

Name

tlg-kaleidoscope-mode

Copy

Value

mouse

Copy

Looping animation

Animate the kaleidoscope effect in an infinite loop by adding this attribute to the element with attribute tlg-kaleidoscope-canvas

Attribute

Option

Name

tlg-kaleidoscope-mode

Copy

Value

loop

Copy

Scroll interaction

Animate the kaleidoscope effect while scrolling through view by adding this attribute to the element with attribute tlg-kaleidoscope-canvas

Attribute

Option

Name

tlg-kaleidoscope-mode

Copy

Value

scroll

Copy

Static

Animate the kaleidoscope effect while scrolling through view by adding this attribute to the element with attribute tlg-kaleidoscope-canvas

Attribute

Option

Name

tlg-kaleidoscope-mode

Copy

Value

static

This it default behavior if no mode is chosen.

Copy

Optional Customization

Define aspect ratio for the image texture
Set the number of segments
Set texture scaling
Set level of motion

Define aspect ratio for the image texture

Adjust the aspect ratio of the image texture by adding this attribute to each image element with attribute tlg-kaleidoscope-image

Apply this attribute when using non-square source images.

Attribute

Option

Name

tlg-kaleidoscope-aspect

Copy

Value

{number} or {ratio}

Default is 1 for square image. Use decimal e.g. "1.78" or ratio "16/9".

Set the number of segments

Control the number of segments in the kaleidoscope by adding the tlg-kaleidoscope-segments attribute to the container with attribute tlg-kaleidoscope-canvas

Default is 6 segments.

Attribute

Option

Name

tlg-kaleidoscope-segments

Copy

Value

{number}

Default is 6.

Set texture scaling

Control the scale of the kaleidoscope texture by adding the tlg-kaleidoscope-scale attribute to the container with attribute tlg-kaleidoscope-canvas

Attribute

Option

Name

tlg-kaleidoscope-scale

Copy

Value

{number}

Default is 1. Larger number will increase the size of each image tile.

Set level of motion

Control the intensity of the motion effect based on mouse movement by adding the tlg-kaleidoscope-motion attribute to the container with attribute tlg-kaleidoscope-canvas

Attribute

Option

Name

tlg-kaleidoscope-motion

Copy

Value

{number}

Default is 1. Larger number will increase motion intensity. Set the value to 0 to disable motion completely.