motioncss-ui 0.1.5 → 0.1.6

package/README.md

@@ -8,6 +8,8 @@ Modern React motion and CSS effects.
 npm install motioncss-ui
 ```
 
+---
+
 ## Magnetic
 
 A lightweight magnetic hover effect for React elements.
@@ -19,25 +21,13 @@ import { Magnetic } from "motioncss-ui";
 
 function App() {
   return (
-    <Magnetic>
-      <button>Hover Me →</button>
+    <Magnetic strength={0.4} speed={0.2} scale={1.05}>
+      <button>Get Started</button>
     </Magnetic>
   );
 }
 ```
 
-### Options
-
-```tsx
-<Magnetic
-  strength={0.4}
-  speed={0.2}
-  scale={1.05}
->
-  <button>Get Started</button>
-</Magnetic>
-```
-
 ### Props
 
 | Prop        | Type   | Default | Description                |
@@ -47,6 +37,287 @@ function App() {
 | `scale`     | number |     `1` | Hover scale                |
 | `className` | string |    `""` | Custom CSS class           |
 
+---
+
+## TiltCard
+
+A 3D tilt hover effect with optional glare highlight for cards and elements.
+
+### Usage
+
+```tsx
+import { TiltCard } from "motioncss-ui";
+
+function App() {
+  return (
+    <TiltCard tilt={15} scale={1.05} glare={true}>
+      <div className="card">Hover me for 3D effect</div>
+    </TiltCard>
+  );
+}
+```
+
+### Props
+
+| Prop          | Type    | Default | Description             |
+| ------------- | ------- | ------: | ----------------------- |
+| `tilt`        | number  |    `15` | Max rotation in degrees |
+| `scale`       | number  |  `1.03` | Scale on hover          |
+| `glare`       | boolean |  `true` | Show a glare highlight  |
+| `perspective` | number  |  `1000` | Perspective in px       |
+| `className`   | string  |    `""` | Custom CSS class        |
+
+---
+
+## ScrollReveal
+
+Reveals elements with animations when they scroll into view.
+
+### Usage
+
+```tsx
+import { ScrollReveal } from "motioncss-ui";
+
+function App() {
+  return (
+    <ScrollReveal animation="fade-up" duration={800} delay={100} distance={40}>
+      <h2>Reveals on Scroll</h2>
+    </ScrollReveal>
+  );
+}
+```
+
+### Props
+
+| Prop        | Type                                                                           |     Default | Description                                        |
+| ----------- | ------------------------------------------------------------------------------ | ----------: | -------------------------------------------------- |
+| `animation` | `"fade" \| "fade-up" \| "fade-down" \| "fade-left" \| "fade-right" \| "zoom"` | `"fade-up"` | Animation type                                     |
+| `duration`  | number                                                                         |       `700` | Duration in ms                                     |
+| `delay`     | number                                                                         |         `0` | Delay in ms                                        |
+| `distance`  | number                                                                         |        `32` | Distance in px for directional animations          |
+| `threshold` | number                                                                         |       `0.2` | Visibility ratio that triggers the animation (0-1) |
+| `once`      | boolean                                                                        |      `true` | Only animate once                                  |
+| `className` | string                                                                         |        `""` | Custom CSS class                                   |
+
+---
+
+## Spotlight
+
+A highly customizable spotlight hover effect that follows the mouse cursor.
+
+### Usage
+
+```tsx
+import { Spotlight } from "motioncss-ui";
+
+function App() {
+  return (
+    <Spotlight size={400} intensity={0.9} color="#6366f1" mode="glow">
+      <div className="card">Move your mouse</div>
+    </Spotlight>
+  );
+}
+```
+
+### Props
+
+| Prop        | Type                                                 |     Default | Description                     |
+| ----------- | ---------------------------------------------------- | ----------: | ------------------------------- |
+| `size`      | number                                               |       `320` | Spotlight diameter in px        |
+| `intensity` | number                                               |      `0.85` | Brightness of the lit area, 0-1 |
+| `color`     | string                                               | `"#ffffff"` | Spotlight color                 |
+| `blur`      | number                                               |        `60` | Blur/softness in px             |
+| `mode`      | `"radial" \| "glow" \| "soft" \| "sharp" \| "neon"` |  `"radial"` | Visual mode preset              |
+| `enabled`   | boolean                                              |      `true` | Whether spotlight is active     |
+| `className` | string                                               |        `""` | Custom CSS class                |
+
+---
+
+## RevealText
+
+Reveals text word-by-word with a staggered slide-up animation triggered on scroll.
+
+### Usage
+
+```tsx
+import { RevealText } from "motioncss-ui";
+
+function App() {
+  return (
+    <RevealText as="h1" stagger={80} duration={700} delay={100}>
+      Words slide in one by one
+    </RevealText>
+  );
+}
+```
+
+### Props
+
+| Prop        | Type                        | Default | Description                               |
+| ----------- | --------------------------- | ------: | ----------------------------------------- |
+| `stagger`   | number                      |    `70` | Delay between words in ms                 |
+| `duration`  | number                      |   `700` | Animation duration per word in ms         |
+| `delay`     | number                      |     `0` | Initial delay before animation starts, ms |
+| `once`      | boolean                     |  `true` | Only animate the first time in viewport   |
+| `as`        | keyof JSX.IntrinsicElements | `"div"` | HTML element to render as                 |
+| `className` | string                      |    `""` | Custom CSS class                          |
+
+---
+
+## GradientFlow
+
+A continuously animated shifting gradient background. Can wrap children or be used standalone.
+
+### Usage
+
+```tsx
+import { GradientFlow } from "motioncss-ui";
+
+function App() {
+  return (
+    <GradientFlow
+      colors={["#6366f1", "#ec4899", "#f59e0b", "#06b6d4"]}
+      angle={120}
+      duration={12}
+      style={{ padding: "60px", borderRadius: "16px" }}
+    >
+      <h2>Gradient content</h2>
+    </GradientFlow>
+  );
+}
+```
+
+> **Note:** Add the `.mcss-gradient-flow` class to your global CSS to enable the shifting animation:
+>
+> ```css
+> .mcss-gradient-flow {
+>   background-size: 300% 300%;
+>   animation: mcss-gradient-shift linear infinite;
+> }
+> @keyframes mcss-gradient-shift {
+>   0%   { background-position: 0% 50%; }
+>   50%  { background-position: 100% 50%; }
+>   100% { background-position: 0% 50%; }
+> }
+> ```
+
+### Props
+
+| Prop        | Type     |                                     Default | Description                |
+| ----------- | -------- | ------------------------------------------: | -------------------------- |
+| `colors`    | string[] | `["#6366f1","#ec4899","#f59e0b","#06b6d4"]` | Gradient color stops       |
+| `angle`     | number   |                                       `120` | Gradient angle in degrees  |
+| `duration`  | number   |                                        `12` | Seconds for one full cycle |
+| `className` | string   |                                        `""` | Custom CSS class           |
+
+---
+
+## EdgeWave / WaveReveal
+
+Two components for cinematic wave transitions.
+
+- **`EdgeWave`** - A full-screen wave that sweeps across the viewport and exits. Perfect for page route transitions.
+- **`WaveReveal`** - A cover overlay that sweeps away on mount to reveal content underneath.
+
+### Usage
+
+```tsx
+import { EdgeWave, WaveReveal } from "motioncss-ui";
+
+// Full-screen page transition wave
+function PageTransition() {
+  return (
+    <EdgeWave
+      origin="left"
+      duration={900}
+      color="#111111"
+      curve={8}
+      onComplete={() => console.log("Wave done")}
+    />
+  );
+}
+
+// Reveal content on mount
+function HeroSection() {
+  return (
+    <WaveReveal origin="left" duration={900} color="#0a0a0a">
+      <h1>Revealed!</h1>
+    </WaveReveal>
+  );
+}
+```
+
+### EdgeWave Props
+
+| Prop         | Type                                      |     Default | Description                           |
+| ------------ | ----------------------------------------- | ----------: | ------------------------------------- |
+| `origin`     | `"left" \| "right" \| "top" \| "bottom"` |    `"left"` | Direction the wave travels            |
+| `duration`   | number                                    |       `900` | Total animation duration in ms        |
+| `color`      | string                                    | `"#111111"` | Wave fill color                       |
+| `curve`      | number                                    |         `8` | Leading edge curve depth (0-100)      |
+| `blur`       | number                                    |         `0` | Backdrop blur behind the wave, in px  |
+| `onComplete` | `() => void`                              |             | Called once the wave exits the screen |
+
+### WaveReveal Props
+
+| Prop       | Type                                      |     Default | Description                    |
+| ---------- | ----------------------------------------- | ----------: | ------------------------------ |
+| `origin`   | `"left" \| "right" \| "top" \| "bottom"` |    `"left"` | Direction the cover wave exits |
+| `duration` | number                                    |       `900` | Duration in ms                 |
+| `color`    | string                                    | `"#111111"` | Overlay fill color             |
+| `curve`    | number                                    |         `8` | Curve depth                    |
+| `blur`     | number                                    |         `0` | Backdrop blur in px            |
+
+---
+
+## Scrollytelling
+
+A scroll-progress context provider. Provides a `progress` value (0-1) to child components via the `useScrollytelling()` hook, letting you drive any animation based on scroll position.
+
+### Usage
+
+```tsx
+import { Scrollytelling, useScrollytelling } from "motioncss-ui";
+
+function AnimatedPanel() {
+  const { progress } = useScrollytelling();
+  return (
+    <div
+      style={{
+        opacity: progress,
+        transform: `scale(${0.8 + progress * 0.2})`,
+      }}
+    >
+      I animate on scroll
+    </div>
+  );
+}
+
+function App() {
+  return (
+    <Scrollytelling height="400vh">
+      <AnimatedPanel />
+    </Scrollytelling>
+  );
+}
+```
+
+### Props
+
+| Prop        | Type             |   Default | Description                                     |
+| ----------- | ---------------- | --------: | ----------------------------------------------- |
+| `height`    | string \| number | `"400vh"` | Total scrollable height of the sticky container |
+| `className` | string           |      `""` | Custom CSS class                                |
+
+### Hook
+
+```tsx
+const { progress } = useScrollytelling();
+// progress: number � 0 at the top, 1 at the bottom
+```
+
+---
+
 ## License
 
-MIT
+MIT

package/dist/motioncss-ui.css

@@ -0,0 +1 @@
+.motioncss-scrollytelling{width:100%}.motioncss-scrollytelling__stage{isolation:isolate}.motioncss-scene{width:100%;height:100%}.motioncss-scroll-layer{transform-origin:center center}