Skip to main content

BoxMotion

BoxMotion provides entrance animations (on scroll into view), scrolling effects (parallax/opacity/blur/rotate/scale), and interactive mouse/tilt behaviors — all integrated with LibDev UI's layout engine and sl Style Layer.

Notes:

  • The component filters style-only props out of the DOM and applies styles via $styles and applyCommonLayoutStyles.

Import​

import { BoxMotion } from "@libdev-ui/base";

Demo​

Fade In Left
Fade In Right
Fade In Up
Zoom In
Slide In Down
Rotate In
Tada (tween)
Hero Section Zoom In

Quick start​

Entrance (on view)​


import React from "react";
import { BoxMotion, Box } from "@libdev-ui/base";

export default function ExampleEntranceTS() {
  return (
    <Box sl={{ minHeight: "160vh", padding: 24 }}>
   
      <Box sl={{ height: 160 }} />
      
      <BoxMotion effect="fadeInUp" speed="fast" delay={0.1}>
        <Box sl={{ background: "#0f172a", color: "#fff", padding: 16, borderRadius: 12 }}>
          Content (fadeInUp, fast, 0.1s delay)
        </Box>
      </BoxMotion>

      <BoxMotion effect="bounceInRight" speed="normal">
        <Box sl={{ background: "#0f172a", color: "#fff", padding: 16, borderRadius: 12 }}>
          Bounce In Right
        </Box>
      </BoxMotion>

      <BoxMotion effect="tada" speed="slow">
        <Box sl={{ background: "#0f172a", color: "#fff", padding: 16, borderRadius: 12 }}>
          Tada Effect
        </Box>
      </BoxMotion>
    </Box>

);
}

Scrolling (parallax/opacity/blur/rotate/scale)​


import React from "react";
import { BoxMotion, Box } from "@libdev-ui/base";

function SectionHero() {
return (
<Box
sl={{
        height: 260,
        borderRadius: 16,
        background: "linear-gradient(135deg,#3b82f6,#64748b)",
        color: "#fff",
        display: "grid",
        placeItems: "center",
        fontSize: 28,
        fontWeight: 800,
      }} >
Hero Section
</Box>
);
}

export default function ExampleScrollTS() {
  return (
    <Box sl={{ minHeight: "220vh", padding: 24 }}>
      <Box sl={{ height: 120 }} />

      <BoxMotion
        disabled
        scroll={{
          vertical: { from: 60, to: -60 },
          opacity: { from: 0.25, to: 1 },
        }}
      >
        <SectionHero />
      </BoxMotion>

      <Box sl={{ height: 160 }} />


      <BoxMotion
        disabled
        scroll={{
          horizontal: { from: -40, to: 40 },
          blur: { from: 3, to: 0 },
          scale: { from: 0.95, to: 1.03 },
        }}
      >
        <Box
          sl={{
            height: 200,
            borderRadius: 12,
            background: "linear-gradient(90deg,#f59e0b,#ef4444)",
            color: "#111",
            display: "grid",
            placeItems: "center",
            fontSize: 20,
            fontWeight: 800,
          }}
        >
          Parallax Banner
        </Box>
      </BoxMotion>
    </Box>

);
}

Mouse Track + 3D Tilt​


import React from "react";
import { BoxMotion, Box } from "@libdev-ui/base";

export default function ExampleMouseTiltTS() {
  return (
    <Box sl={{ minHeight: "160vh", padding: 24, display: "grid", gap: 16, gridTemplateColumns: "repeat(3, minmax(0,1fr))" }}>
      <BoxMotion
        effect="jackInTheBox"
        speed="normal"
        scroll={{
          mouseTrack: { strength: 12, axis: "both" },
          tilt3d: { maxTilt: 10, perspective: 900 },
        }}
      >
        <Box sl={{ background: "#0f172a", color: "#fff", padding: 16, borderRadius: 12, height: 140 }}>
          Hover me (jackInTheBox + mouse + tilt)
        </Box>
      </BoxMotion>

      <BoxMotion disabled scroll={{ mouseTrack: { strength: 16, axis: "both" } }}>
        <Box sl={{ background: "#0f172a", color: "#fff", padding: 16, borderRadius: 12, height: 140 }}>
          Hover me (mouse track only)
        </Box>
      </BoxMotion>

      <BoxMotion disabled scroll={{ tilt3d: { maxTilt: 12, perspective: 1000 } }}>
        <Box sl={{ background: "#0f172a", color: "#fff", padding: 16, borderRadius: 12, height: 140 }}>
          Hover me (3D tilt only)
        </Box>
      </BoxMotion>
    </Box>

);
}

Props​

PropTypeDefaultDescription
childrenReactNode—Content to animate.
effectMotionEntranceEffect"fadeIn"Entrance effect to play when the element enters the viewport.
speed"slow" | "normal" | "fast""normal"Animation speed.
delaynumber0Delay (seconds) before the entrance animation starts.
staggerChildrennumber—Stagger between child animations (seconds).
viewportOncebooleantrueRun the entrance animation only once (first time in view).
viewportAmountnumber0.2Fraction (0..1) of element that must enter the viewport to trigger.
disabledbooleanfalseDisables entrance animation (scroll/mouse effects still work).
variantsOverrideVariants—Custom variants; take precedence over effect.
scroll{ vertical?, horizontal?, opacity?, blur?, rotate?, scale?, mouseTrack?, tilt3d? }—Scrolling/mouse/tilt effects configuration.
slany—Style Layer object/array/function; applied via $styles.
...restHTMLMotionProps<"div">—Any other framer-motion div props (e.g., onClick, etc.).

MotionEntranceEffect (values)​

Fade: fadeIn, fadeInUp, fadeInDown, fadeInLeft, fadeInRight
Zoom: zoomIn, zoomOut
Bounce: bounceIn, bounceInUp, bounceInDown, bounceInLeft, bounceInRight
Slide: slideInUp, slideInDown, slideInLeft, slideInRight
Rotate: rotateIn
Light Speed: lightSpeedIn
Flip: flipInX, flipInY
Special: rollIn, jackInTheBox, wobble, hinge, pulse, swing, tada, rubberBand, bounce, flash, shake, jello

Behavior & Notes​

  • By default, entrance uses whileInView with { once: true }. If you provide animate, the component won’t attach whileInView/viewport, avoiding conflicts.
  • Scroll/mouse/tilt MotionValues are applied only when configured, so they don’t override entrance variants.
  • For multi‑keyframe effects (tada, rubberBand, wobble, swing, bounce, flash, shake, jello) the library automatically uses tween instead of spring to comply with Framer’s limitation (“Only two keyframes currently supported with spring…”).

Theming & SL (Style Layer)​

  • Use sl to pass Style Layer tokens/objects/functions, consistent with other LibDev components.
  • Layout props (margin/padding/sizing/positioning/overflow/flex/grid) are supported and resolved by the central layout engine.

Full showcase (mixed)​


import React from "react";
import { BoxMotion, Box } from "@libdev-ui/base";

export default function BoxMotionShowcaseTS() {
  const card = { background: "#0f172a", color: "#fff", padding: 16, borderRadius: 12, minHeight: 96, display: "grid", placeItems: "center" };
  return (
    <Box sl={{ background: "#f7f7f8", minHeight: "220vh", padding: "40px 0 120px" }}>
      <Box sl={{ maxWidth: 1000, margin: "0 auto", padding: "0 20px", display: "grid", gap: 24 }}>
        <Box sl={{ height: 140 }} />
        <BoxMotion effect="fadeInLeft"><Box sl={card}>Fade In Left</Box></BoxMotion>
        <BoxMotion effect="fadeInRight"><Box sl={card}>Fade In Right</Box></BoxMotion>
        <BoxMotion effect="fadeInUp"><Box sl={card}>Fade In Up</Box></BoxMotion>
        <BoxMotion effect="zoomIn"><Box sl={card}>Zoom In</Box></BoxMotion>
        <BoxMotion effect="slideInDown"><Box sl={card}>Slide In Down</Box></BoxMotion>
        <BoxMotion effect="rotateIn"><Box sl={card}>Rotate In</Box></BoxMotion>
        <BoxMotion effect="tada" speed="slow"><Box sl={card}>Tada (tween)</Box></BoxMotion>

        <Box sl={{ height: 160 }} />

        <BoxMotion disabled scroll={{ vertical: { from: 60, to: -60 }, opacity: { from: 0.3, to: 1 } }}>
          <Box sl={{ ...card, height: 220, background: "linear-gradient(135deg,#3b82f6,#64748b)" }}>Hero Section</Box>
        </BoxMotion>
      </Box>
    </Box>

);
}