Skip to main content

Creative Link Effects

Transform your web interactions with stunning hover effects and smooth animations

View Effects Get Started
Motion Highlights Design Spotlight Video Projection Featured Work

Effects

Explore our collection of creative link effects and animations

Motion Effect

Slide Effect

Smooth sliding animation on hover

View Demo →
Spotlight Effect

Spotlight Effect

Dramatic spotlight reveal animation

View Demo →
Projection Effect

3D Projection

WebGL-powered 3D link effects

View Demo →
Featured Design

Morph Effect

Shape-shifting link animations

View Demo →
Dev Spotlight

Glitch Effect

Digital distortion animations

View Demo →
Cloth Simulation

Ripple Effect

Water ripple link interactions

View Demo →
Clarisse Design

Neon Glow

Electric neon link effects

View Demo →
Fleming Work

Particle Burst

Explosive particle animations

View Demo →
Solid Design

Solid Transition

Smooth state transitions

View Demo →

Implementation

Get started with our link effects in minutes

Simple Integration

1. Install Package

npm install creative-link-effects

2. Import Styles

@import 'creative-link-effects/css';

3. Add Classes

<a href="#" class="cl-effect-slide">Your Link</a>
Implementation Guide Code Preview
Performance

Lightweight

Under 5KB gzipped with zero dependencies

Customization

Customizable

Easy to customize colors, timing, and easing

Responsive

Responsive

Works perfectly on all screen sizes

Documentation

Complete guides and API references

Getting Started

Installation

npm install creative-link-effects
# or
yarn add creative-link-effects
# or
pnpm add creative-link-effects

Basic Usage

import 'creative-link-effects/css';

<a href="#" class="cl-effect-slide">
  Hover me
</a>

Available Effects

  • • cl-effect-slide - Slide from left
  • • cl-effect-spotlight - Spotlight reveal
  • • cl-effect-morph - Shape morphing
  • • cl-effect-glitch - Digital glitch
  • • cl-effect-ripple - Water ripple
Quick Start

Quick Start Guide

Get up and running in under 5 minutes

Customization

Customization

Tailor effects to match your design

API Reference

API Reference

Complete method and property docs

Examples

Examples

Real-world usage patterns