Framework v1.0.0

Drengine

A JavaScript & CSS framework for building surreal, dreamlike interfaces. Fluid morphs, glass panels, soft-UI shadows, levitating objects, and cinematic page transitions — all in one.

Fluid Morphing Glassmorphism Neumorphism Floating Objects Dream Transitions

Module 01

Fluid Morphing UI

Organic shapes that breathe and evolve. Text that scrambles through chaos into clarity. FLIP animations that make layout changes feel physical.

Blob Morphing

🌀

✦

Text Scramble

Dream

Click to scramble →

Morphing Buttons

// Morph a blob

Drengine.Morph.blob('#myEl', {

  colors: ['#a855f7', '#06b6d4'],

  intensity: 0.7, speed: 1.2

});

// Scramble text

Drengine.Morph.text('#title', 'Surreal');

Module 02

Glassmorphism

Frosted, luminous panels with depth, tilt, and shimmer. Backdrop refraction that warps reality behind it.

🔮

Raised

Elevated panel with deep shadow

🌊

Flat

Subtle, minimal glass surface

✨

Animated

Shimmer sweep enabled

🕳️

Sunken

Inset depth effect

// Apply glass to any element

Drengine.Glass.apply('.my-panel', {

  blur: 24, tint: 'rgba(168,85,247,0.12)',

  depth: 'raised', shine: true, animated: true

});

// data-attribute auto-init

<div data-drn-glass>...</div>

Module 03

Neumorphism

Soft-UI that emerges from the surface. Extruded, pressed, concave — every shadow tells a story.

🧠

Flat

Extruded surface, dual-shadow depth.

💎

Convex

Dome-like raised surface with gradient.

🌀

Concave

Inward-curving depression effect.

Toggle

Progress

// Apply neumorphism

Drengine.Neumorphism.apply('#myCard', {

  bg: '#e0e5ec', type: 'convex',

  distance: 10, interactive: true

});

Module 04

Floating Objects

Levitating elements with physics-aware shadows. Particle systems, magnetic pull, and 3D parallax depth.

🪐

✦ Levitating

🌙

⭐

💫

🔮

Magnetic Pull

Hover near these orbs — they'll be drawn to your cursor

🌀

💧

🔥

⚡

// Levitate any element

Drengine.Float.levitate('#planet', {

  amplitude: 20, period: 3000, shadow: true

});

// Spawn particles

Drengine.Float.particles('#scene', {

  count: 40, shapes: ['★', '◆', '✦']

});

// Magnetic cursor pull

Drengine.Float.magnetic('.drn-magnetic', { radius: 120 });

Module 05

Dream Transitions

Five cinematic page transitions. Scroll reveals in 5 styles. A surreal cursor trail. Glitch effects that fracture reality.

Page Transitions

Click to preview each transition style

Glitch Effect

Click the text

REALITY

Dream Cursor

Warp Transition

// Page transition

Drengine.Dream.go('page-2', 'vortex');

// Scroll reveal via attribute

<h1 data-dream-in="bloom">...</h1>

// Surreal cursor

Drengine.Dream.cursor({ color: '#a855f7', trail: 10 });

// Glitch any element

Drengine.Dream.glitch('#title', { loop: true });

Scroll Reveals

Five ways reality enters

Scroll down to trigger each animation style. Mix and match across your page.

👻

Fade

data-dream-in="fade"

🚀

Rise

data-dream-in="rise"

🌸

Bloom

data-dream-in="bloom"

⚡

Glitch

data-dream-in="glitch"

🌀

Warp

data-dream-in="warp"

Reference

HTML Attributes

Zero-JS init. Drop attributes on any element and Drengine auto-wires everything on DOMContentLoaded.

<!-- Auto-float -->

<div data-drn-float='{"amplitude":20,"period":3000}'>🪐</div>

<!-- Auto-glass -->

<div data-drn-glass='{"blur":24,"depth":"raised","shine":true}'>...</div>

<!-- Auto-neumorphic -->

<div data-drn-neu='{"type":"convex","interactive":true}'>...</div>

<!-- Auto-blob -->

<div data-drn-blob>...</div>

<!-- Scroll reveal -->

<h1 data-dream-in="bloom">...</h1>

<!-- Page navigation -->

<button data-go="about:vortex">Go to About</button>

<div data-page="about">...</div>