SAPTARSHI-coder · SAMJOD07-devz · Jun 2, 2026 · Jun 2, 2026 · Jun 2, 2026 · Jun 2, 2026
@@ -0,0 +1,17 @@
+# Floating Animation
+
+## 1. What does this do?
+
+Creates a smooth floating effect by moving an element vertically in a continuous loop while dynamically adjusting its shadow to enhance the perception of depth.
+
+## 2. How is it used?
+
+```html
+<div class="floating-element">
+    Floating Content
+</div>
+```
+
+## 3. Why is it useful?
+
+Floating animations are commonly used to add subtle motion and visual interest to interfaces. This effect can be applied to hero illustrations, feature cards, call-to-action sections, icons, and decorative UI elements. It aligns with EaseMotion CSS's animation-first philosophy by providing a lightweight, reusable micro-interaction that improves visual engagement without requiring custom keyframes.
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Floating Animation Demo</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+    <h1>Floating Animation Demo</h1>
+
+    <div class="demo-container">
+
+        <div class="card floating-element float-small">
+            <div class="percentage">10%</div>
+            <h2>Small Float</h2>
+            <p>
+                Subtle movement for decorative elements and icons.
+            </p>
+        </div>
+
+        <div class="card floating-element">
+            <div class="percentage">25%</div>
+            <h2>Default Float</h2>
+            <p>
+                Balanced motion for cards, sections and components.
+            </p>
+        </div>
+
+        <div class="card floating-element float-large">
+            <div class="percentage">50%</div>
+            <h2>Large Float</h2>
+            <p>
+                Strong floating motion for hero sections and CTA elements.
+            </p>
+        </div>
+
+    </div>
+
+</body>
+</html>
@@ -0,0 +1,242 @@
+:root {
+    --float-distance: 25px;
+    --float-duration: 3s;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    min-height: 100vh;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    padding: 60px 30px;
+
+    font-family: Inter, Arial, sans-serif;
+
+    background:
+        radial-gradient(circle at top left, #60a5fa 0%, transparent 35%),
+        radial-gradient(circle at top right, #8b5cf6 0%, transparent 35%),
+        radial-gradient(circle at bottom center, #06b6d4 0%, transparent 30%),
+        linear-gradient(135deg, #0f172a, #1e293b);
+
+    overflow-x: hidden;
+}
+
+h1 {
+    color: white;
+    font-size: 3rem;
+    margin-bottom: 80px;
+    text-align: center;
+
+    text-shadow:
+        0 0 20px rgba(255,255,255,0.2);
+}
+
+.demo-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+
+    gap: 80px;
+}
+
+/* Card */
+
+.card {
+    width: 320px;
+    height: 380px;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    gap: 20px;
+
+    text-align: center;
+    padding: 30px;
+
+    border-radius: 30px;
+
+    background:
+        linear-gradient(
+            145deg,
+            rgba(255,255,255,0.18),
+            rgba(255,255,255,0.08)
+        );
+
+    border: 1px solid rgba(255,255,255,0.15);
+
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+
+    color: white;
+
+    position: relative;
+    overflow: hidden;
+
+    transition:
+        transform 0.4s ease,
+        box-shadow 0.4s ease;
+}
+
+.card::before {
+    content: "";
+
+    position: absolute;
+    inset: 0;
+
+    background:
+        radial-gradient(
+            circle at top left,
+            rgba(255,255,255,0.20),
+            transparent 45%
+        );
+
+    pointer-events: none;
+}
+
+/* Percentage */
+
+.percentage {
+    font-size: 4.5rem;
+    font-weight: 900;
+
+    background:
+        linear-gradient(
+            135deg,
+            #60a5fa,
+            #a855f7
+        );
+
+    -webkit-background-clip: text;
+    background-clip: text;
+
+    color: transparent;
+    line-height: 1;
+}
+
+.card h2 {
+    font-size: 1.7rem;
+    font-weight: 700;
+}
+
+.card p {
+    line-height: 1.6;
+    opacity: 0.9;
+    max-width: 220px;
+}
+
+/* Floating Animation */
+
+@keyframes floating {
+    0%,
+    100% {
+        transform: translateY(0);
+
+        box-shadow:
+            0 20px 40px rgba(0,0,0,0.25);
+    }
+
+    50% {
+        transform: translateY(
+            calc(-1 * var(--float-distance))
+        );
+
+        box-shadow:
+            0 calc(30px + var(--float-distance))
+            calc(60px + var(--float-distance))
+            rgba(0,0,0,0.45);
+    }
+}
+
+.floating-element {
+    animation:
+        floating
+        var(--float-duration)
+        ease-in-out
+        infinite;
+
+    will-change:
+        transform,
+        box-shadow;
+}
+
+/* Hover Enhancement */
+
+.floating-element:hover {
+    animation-play-state: paused;
+
+    transform:
+        translateY(calc(-1 * var(--float-distance)))
+        scale(1.03);
+
+    box-shadow:
+        0 calc(35px + var(--float-distance))
+        calc(70px + var(--float-distance))
+        rgba(0,0,0,0.55);
+}
+
+/* Variants */
+
+.float-small {
+    --float-distance: 10px;
+    --float-duration: 4.5s;
+}
+
+.float-large {
+    --float-distance: 50px;
+    --float-duration: 2.2s;
+}
+
+/* Staggered Motion */
+
+.card:nth-child(1) {
+    animation-delay: 0s;
+}
+
+.card:nth-child(2) {
+    animation-delay: 0.8s;
+}
+
+.card:nth-child(3) {
+    animation-delay: 1.6s;
+}
+
+/* Accessibility */
+
+@media (prefers-reduced-motion: reduce) {
+    .floating-element {
+        animation: none;
+    }
+
+    .floating-element:hover {
+        transform: scale(1.03);
+    }
+}
+
+/* Mobile */
+
+@media (max-width: 1024px) {
+    .demo-container {
+        gap: 40px;
+    }
+
+    .card {
+        width: 280px;
+        height: 340px;
+    }
+
+    .percentage {
+        font-size: 3.5rem;
+    }
+}