Customizing Oh-cursor “Feather”: Colors, Size, and Motion TipsOh-cursor’s “Feather” effect is a lightweight, elegant cursor enhancement that adds a subtle trail and motion to pointer interaction. This article covers everything you need to customize Feather’s colors, size, and motion so the effect complements your site’s design without harming performance.
What is Feather?
Feather is a cursor effect from the Oh-cursor library that creates a soft, trailing element following the mouse pointer. It’s designed to be visually pleasing while remaining unobtrusive and performant. Typical uses include product pages, portfolios, and interactive landing pages where small UI flourishes improve perceived polish.
Core customization areas
There are three primary areas to tune:
- Colors — the look and mood (solid, gradient, or multi-colored trails).
- Size — overall footprint and responsiveness to screen density.
- Motion — speed, easing, trail length, and interaction reactions (hover, click, idle).
Basic setup
- Install Oh-cursor per its documentation (npm, CDN, or local file).
- Initialize Feather with default options. Example:
<script src="oh-cursor.min.js"></script> <script> const feather = new OhCursor.Feather(); feather.init(); </script> Adjust the initialization options when creating the instance to customize behavior (see sections below).
Colors: approaches and examples
You can style Feather in three common ways: single color, gradient, and dynamic (multi-color) based on context.
Single color (CSS variable):
:root { --feather-color: rgba(255, 105, 180, 0.9); /* hot pink */ } Initialize and use that variable in the Feather configuration or CSS rules the library exposes.
Gradient (linear or radial):
--feather-gradient: linear-gradient(90deg, #00f, #0ff); If Feather supports gradients via canvas or SVG, pass gradient stops to the config:
const feather = new OhCursor.Feather({ colorType: 'gradient', gradientStops: ['#ff7a18', '#af002d', '#320a7c'] }); Dynamic color changes (on hover or by element):
- Use data attributes (data-feather-color) on elements to change the cursor color when hovering that element.
- Listen for mouseenter/mouseleave events and call feather.setColor(color).
Example:
document.querySelectorAll('[data-feather-color]').forEach(el => { el.addEventListener('mouseenter', () => feather.setColor(el.dataset.featherColor)); el.addEventListener('mouseleave', () => feather.resetColor()); }); Accessibility note: ensure sufficient contrast with background and avoid rapid flashing color changes that can trigger photosensitive reactions.
Size: scaling and responsiveness
Feather size determines visual weight. Consider device pixel ratio and pointer precision (touch vs. mouse).
Basic size option:
const feather = new OhCursor.Feather({ size: 18 // pixels }); Responsive sizing:
function getSize() { if (window.innerWidth < 480) return 12; if (window.devicePixelRatio > 1.5) return 20; return 16; } const feather = new OhCursor.Feather({ size: getSize() }); window.addEventListener('resize', () => feather.setSize(getSize())); Interactive scaling:
- On hover over interactive elements, enlarge slightly to signal affordance.
feather.on('hoverStart', () => feather.setSize(24)); feather.on('hoverEnd', () => feather.setSize(16));
Motion: speed, easing, and trail length
Motion controls make Feather feel natural. Key parameters:
- Trailing length (how long the tail persists).
- Lag / smoothing (how quickly the cursor element follows).
- Easing function (linear, easeOutQuad, spring).
- Reaction to clicks and drags.
Example config:
const feather = new OhCursor.Feather({ trailLength: 12, // number of trail particles smoothing: 0.15, // lower = snappier, higher = smoother easing: 'easeOutQuad' }); Implementing a spring effect:
feather.setMotion({ type: 'spring', stiffness: 0.08, damping: 0.9 }); Performance tip: reduce trailLength and lower smoothing on low-powered devices; throttle mousemove when necessary.
Interaction behaviors
Hover states:
- Enlarge or change color when hovering buttons/links.
- Use data attributes or CSS classes to trigger behaviors.
Click animations:
- Briefly scale up and fade the feather on click for tactile feedback.
document.addEventListener('mousedown', () => feather.clickPulse()); document.addEventListener('mouseup', () => feather.releasePulse());
Idle / inactivity:
- Fade or reduce motion after a period of inactivity to avoid distraction.
let idleTimer; document.addEventListener('mousemove', () => { clearTimeout(idleTimer); feather.setOpacity(1); idleTimer = setTimeout(() => feather.setOpacity(0.3), 4000); });
Touch devices:
- Many touch devices don’t show cursors; disable Feather on touchstart or for small screens unless you provide a clear UX reason.
Performance considerations
- Use requestAnimationFrame for rendering updates.
- Use canvas or WebGL if many particles are needed; prefer SVG for simpler shapes.
- Reduce particle count, resolution, and effects on low-power devices.
- Debounce or throttle heavy listeners (resize, mousemove).
- Test with Lighthouse to ensure no significant impact on CLS, FPS, or CPU.
Debugging tips
- Log config at init to confirm options.
- Temporarily show control handles (position markers) to ensure correct alignment.
- Profile paint/layout in browser devtools to find bottlenecks.
- Check pointer events and z-index so Feather doesn’t block clicks.
Example: complete initialization
<script> const feather = new OhCursor.Feather({ size: 18, colorType: 'gradient', gradientStops: ['#ff7a18', '#ff0078'], trailLength: 10, smoothing: 0.12, easing: 'easeOutCubic' }); feather.init(); // Dynamic hover colors document.querySelectorAll('[data-feather-color]').forEach(el => { el.addEventListener('mouseenter', () => feather.setColor(el.dataset.featherColor)); el.addEventListener('mouseleave', () => feather.resetColor()); }); </script> When not to use Feather
- Content-heavy pages where users need speed and minimal distractions (e.g., news, dashboards).
- Complex interactions that require precise pointer control (e.g., vector editors).
- Accessibility-first experiences where motion could interfere with usability.
Summary
Customizing Oh-cursor “Feather” focuses on balancing aesthetics with performance: pick accessible colors, scale the size responsively, and tune motion to feel natural without taxing resources. Start simple, add behavior progressively, and test across devices.
Leave a Reply