Cursor Vehicle script

Quick start: copy this

Paste this just before the closing </body> tag of any page where you want the vehicle. That is all. It works on Webflow, Framer, WordPress, Squarespace, Wix and plain HTML, anywhere you can add custom code.

<script src="https://uknowux.com/cursor-vehicle/cursor-vehicle.js" defer></script>

Tutorial

1. Step 1

   Add the script

   Put the script tag from the quick start into your site. In a site builder, use its custom code area for the footer or body end. On a plain site, put it in your HTML file. A new vehicle (motorbike, plane or parrot) is picked at random every time the page loads.

2. Step 2

   Choose which vehicles appear

   Use the names bike, plane, bird and truck. List several to pick one at random, or use a single one to always show it.

   Copy

   <!-- random pick from two -->
   <script src="https://uknowux.com/cursor-vehicle/cursor-vehicle.js"
           data-vehicles="plane,bird" defer></script>
   
   <!-- always the parrot -->
   <script src="https://uknowux.com/cursor-vehicle/cursor-vehicle.js"
           data-vehicle="bird" defer></script>

3. Step 3

   Host it yourself (recommended for client work)

   Loading the script from uknowux.com is the fastest way to try it. For a real client site, download the files, upload them to your own site, and point the tag at your copy. This is also how you get the truck, because its model files must come from your own domain.

   Download the files (zip)

   Copy

   <!-- files uploaded to /cursor-vehicle/ on your own site -->
   <script src="/cursor-vehicle/cursor-vehicle.js"
           data-assets="/cursor-vehicle"
           data-vehicles="truck,bike,plane,bird" defer></script>

4. Step 4

   Control it from your own buttons (optional)

   The script adds a small CursorVehicle object to the page. This is how the demo buttons above work. Add data-button="false" to the script tag if you want to hide the built-in Vehicle menu and use your own buttons.

   Copy

   <button onclick="CursorVehicle.set('plane')">Fly a plane</button>
   <button onclick="CursorVehicle.hide()">Hide</button>
   <button onclick="CursorVehicle.show()">Show</button>

All options

How it works

• A see-through layer. A full-screen canvas sits over your page with pointer-events: none, so clicks, hovers and scrolling reach your content as normal.
• Cursor to ground. The mouse position is turned into a point on an invisible floor with a ray from the camera. That point is where the vehicle heads.
• Steer, then go. Vehicles turn at a limited rate and slow down while facing the wrong way, so they drive like real ones. The plane and parrot keep moving and circle when they arrive.
• Small details. Wheels spin with distance, the bike leans into turns, the parrot flaps and bobs, and dust puffs from the wheels at speed.

Before you ship it

• It is playful. Use it on a portfolio home page or a campaign page, not on a checkout or a form-heavy page.
• It loads the three.js library (about 600 KB) from a public CDN, so add it only to pages that need it.
• The menu saves the visitor's vehicle and on/off choice in a small functional cookie on your site that lasts a year. If your site has a cookie notice, mention it there, or use data-button="false" to avoid it.
• It is skipped for visitors who prefer reduced motion, and for browsers without WebGL.
• The vehicle sits above your content (z-index 40). If you have a fixed header or modal, give it a z-index above 45 to keep it on top.