--- title: "bd-cursor" subtitle: "In-house custom cursor system for desktop interactions" description: "Documentation for bd-cursor — the ByDefault reusable cursor library for any project. Covers cursor states, interaction types, and progressive enhancement." author: "Studio" section: "Website" layer: "app" subsection: "Interactions" order: 3 --- # bd-cursor Our in-house custom cursor system. Replaces the default cursor with a smooth, animated dot and halo that responds to interactive elements. Desktop only (991px+) — falls back to the default cursor on mobile and touch devices. ### Install Add the CSS and JS to your project: ```html ``` Add the cursor elements to your ``: ```html
``` ### Usage Add `data-cursor` to any element to change the cursor style on hover. ```html Link cursor
Drag cursor
``` --- ## Live Demos Hover over each element to see the cursor change. Desktop only. ### Navigation Cursors

Link

Hover for link cursor

Button

External

Hover for external cursor

Home

Hover for home cursor
```html Link External link Home ``` ### Action Cursors

Plus

Play

Close

Check

Search

Info

```html ``` ### Directional Cursors

Arrow Left / Right

Chevron Left / Right

```html ``` ### Interactive Cursors

Drag

Hover for drag cursor

Click Anywhere

Hover for click-anywhere cursor

Scroll

Hover for scroll cursor

Look

Hover for look cursor

Text

Hover for text cursor
```html
Drag area
Click anywhere
Scroll area
Look
Text area
``` ### Social Cursors
Instagram TikTok LinkedIn YouTube Email Chat
```html Instagram TikTok LinkedIn YouTube Email Chat ``` --- ## All Cursor Types | Value | Description | |-------|-------------| | `pointer` | Generic pointer | | `link` | Link indicator | | `button` | Button indicator | | `text` | Text selection cursor | | `external` | External link icon | | `home` | Home icon | | `plus` | Plus / add | | `play` | Play / media trigger | | `close` | Close / X | | `check` | Checkmark | | `search` | Search icon | | `info` | Info icon | | `look` | Eye / look | | `drag` | Drag indicator | | `click-anywhere` | Click anywhere prompt | | `scroll` | Scroll prompt | | `locked` | Locked state | | `case-study` | Case study indicator | | `arrow-left` | Left arrow | | `arrow-right` | Right arrow | | `chevron-left` | Left chevron | | `chevron-right` | Right chevron | | `x` | Close / dismiss | | `chat` | Chat icon | | `instagram` | Instagram icon | | `tiktok` | TikTok icon | | `linkedin` | LinkedIn icon | | `youtube` | YouTube icon | | `email` | Email icon | ## Dependencies - **None** — zero-dependency vanilla JS (no GSAP required) - Desktop only (991px+), skipped on touch devices - Requires `.cursor-default` and `.cursor-halo` elements in DOM - Adds `custom-cursor-active` class to `` when active ## Animation Configuration The follow speed and snapping behavior can be tuned via constants at the top of `bd-cursor.js`: | Constant | Default | Description | |----------|---------|-------------| | `CURSOR_LERP` | `0.25` | Cursor follow speed — higher = tighter follow, lower = smoother trail | | `HALO_LERP` | `0.25` | Halo follow speed — matches cursor so both layers stay together | | `SNAP_THRESHOLD` | `0.5` | Distance (px) at which the cursor snaps to the target position |