New Effects - Atlas Admin

Theme Transition

Circular reveal animation for dark/light mode switching

import { createThemeTransition } from '@casoon/atlas-effects';
const theme = createThemeTransition({ effect: "circle", origin: button });
theme.toggle();

Gesture Detection

Touch & pointer gestures - Swipe, Pinch, Long Press, Pan

Try gestures here (touch or mouse)

Waiting for gesture...

Swipe Long Press Pan

import { createGesture } from '@casoon/atlas-effects';
createGesture(element, {


onSwipe: ({ direction }) => console.log(direction),

onLongPress: () => console.log('Long press!')
});

Scroll Effects

scrollProgress, parallaxLayer, textSplit, scrollCounter

Scroll Progress

Scroll the page to see progress

Scroll Counter

0 users

Animates to 12,500 on scroll

Text Scramble

Matrix-style text reveal animation

ATLAS EFFECTS

Shimmer Effect

Shine sweep animation for buttons and cards

Card Title

Hover me

Spotlight Effect

Cursor-following spotlight/highlight

Move your cursor

Spotlight follows mouse movement

Glitch Effect

Digital glitch with RGB shift and scanlines

GLITCH

Film Grain Overlay

Animated film grain/noise texture

Presets:

import { createGrain, grainPresets } from '@casoon/atlas-effects';
const grain = createGrain(grainPresets.film);
grain.show(); // grain.hide();

fx - Effect Composition API

Chain multiple effects with a fluent builder

Combined Effects

This card has ripple + tilt + glow combined via fx()

import { fx, ripple, tilt, glow } from '@casoon/atlas-effects';

const cleanup = fx('#my-card')
.add(ripple())
.add(tilt({ max: 15 }))
.add(glow({ color: "violet" }))
.apply();

View Transitions API

Modern page/state transitions with shared element morphing

1

Click to expand

2

Click to expand

3

Click to expand

4

Click to expand

import { startViewTransition, sharedElementTransition } from
                    '@casoon/atlas-effects';

await sharedElementTransition(thumbnail, fullImage, { name: "hero" });

Custom Cursor

Custom cursor styles with magnetic attraction and trails

Custom Cursor Zone

Move your cursor here to see the effect

import { createCustomCursor } from '@casoon/atlas-effects';
const cursor = createCustomCursor({
style: 'dot-ring',
magnetic: true,
magneticTargets: 'button, a'
});

Horizontal Scroll

Transform vertical scroll into horizontal section navigation

1

Section One

2

Section Two

3

Section Three

4

Section Four

Drag or scroll horizontally through the sections

import { horizontalScroll } from '@casoon/atlas-effects';
horizontalScroll({
container: '.horizontal-container',
showProgress: true
});

Parallax Layers

Depth-based parallax scrolling effects

Parallax Demo

Scroll to see depth effect

import { parallaxLayer } from '@casoon/atlas-effects';
parallaxLayer('.bg-layer', { speed: 0.3 });
parallaxLayer('.fg-layer', { speed: 0.8, perspective: true });

Typewriter Effect

Animated typing with cursor and variable speed

|

import { typewriter } from '@casoon/atlas-effects';
typewriter(element, { text: 'Hello World!', speed: 100, cursor: true });

Confetti Celebration

Physics-based confetti particles for celebrations

import { confetti } from '@casoon/atlas-effects';
const celebration = confetti('#container', { count: 100, spread: 60 });
celebration.trigger();

Particles & Orbs

Animated floating particles and glowing orbs

Floating particles & orbs

import { particles, orbs } from '@casoon/atlas-effects';
particles('#container', { count: 50, color: 'white' });
orbs('#container', { count: 3, colors: ['violet', 'fuchsia'] });

Scroll Reveal

Elements animate in as they enter the viewport

🚀

Fade Up

⚡

Staggered

✨

Animation

import { scrollReveal } from '@casoon/atlas-effects';
scrollReveal('.reveal-item', { threshold: 0.2, stagger: 100 });

Magnetic Effect

Elements attract towards the cursor on hover

⭐

import { magnetic } from '@casoon/atlas-effects';
magnetic('.magnetic-item', { strength: 0.5, ease: 0.1 });

Wave Effect

Animated wave patterns with customizable colors

Animated waves

import { wave } from '@casoon/atlas-effects';
wave('#container', { layers: 3, colors: ['indigo', 'violet', 'fuchsia'] });