Interactive Reptile

@meowish.dev

156.3K followers · usually 420 views a post

Views

11.7M

Likes

867.2K

Comments

5.0K

Shares

59.0K

SoundTikTok sound · áurea cósmica

Why it worked

The video combines satisfying, responsive visual animation with the technical 'behind-the-scenes' code, appealing to both casual viewers and the coding community.

Summary

A digital animation of a skeletal reptile follows the movement of the user's mouse cursor. The video displays the underlying JavaScript code used to create the interactive effect.

Structure

1Display of skeletal reptile animation
2Mouse cursor interaction demonstration
3Display of JavaScript code snippet

On-screen text

Interactive Reptile moveTo(x, y) { this.nodes[0].updateRelative(true, true); let dist = ((x - this.end.x) ** 2 + (y - this.end.y) ** 2) ** 0.5; let len = Math.max(0, dist * this.speed); for (let i = this.nodes.length - 1; i >= 0; i--) { let node = this.nodes[i]; let ang = Math.atan2(node.y - y, node.x - x); node.x = x + len * Math.cos(ang); node.y = y + len * Math.sin(ang); x = node.x; y = node.y; len = node.size; } update() {this.moveTo(input.mouse.x, input.mouse.y)}