@libreapps/ui 5.4.1

package/dist/3d/marquee.js

@@ -0,0 +1,352 @@
+"use client";
+'use strict';
+
+var React = require('react');
+var classVarianceAuthority = require('class-variance-authority');
+var framerMotion = require('framer-motion');
+var utils = require('@libreapps/ui/lib/utils');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var marquee3DVariants = classVarianceAuthority.cva(
+  [
+    "relative overflow-hidden whitespace-nowrap",
+    "transform-gpu will-change-transform",
+    "[perspective:1000px]"
+  ],
+  {
+    variants: {
+      variant: {
+        default: [
+          "bg-background text-foreground",
+          "[&_.marquee-content]:text-current"
+        ],
+        neon: [
+          "bg-black text-cyan-400",
+          "[&_.marquee-content]:text-cyan-400",
+          "[&_.marquee-content]:drop-shadow-[0_0_10px_currentColor]",
+          "[&_.marquee-content]:animate-pulse"
+        ],
+        rainbow: [
+          "bg-black",
+          "[&_.marquee-content]:bg-gradient-to-r [&_.marquee-content]:from-red-500 [&_.marquee-content]:via-yellow-500 [&_.marquee-content]:via-green-500 [&_.marquee-content]:via-blue-500 [&_.marquee-content]:to-purple-500",
+          "[&_.marquee-content]:bg-clip-text [&_.marquee-content]:text-transparent"
+        ],
+        metallic: [
+          "bg-slate-900",
+          "[&_.marquee-content]:bg-gradient-to-b [&_.marquee-content]:from-gray-200 [&_.marquee-content]:via-gray-400 [&_.marquee-content]:to-gray-600",
+          "[&_.marquee-content]:bg-clip-text [&_.marquee-content]:text-transparent"
+        ],
+        fire: [
+          "bg-black",
+          "[&_.marquee-content]:bg-gradient-to-t [&_.marquee-content]:from-red-600 [&_.marquee-content]:via-orange-500 [&_.marquee-content]:to-yellow-400",
+          "[&_.marquee-content]:bg-clip-text [&_.marquee-content]:text-transparent",
+          "[&_.marquee-content]:drop-shadow-[0_0_20px_#ff6600]"
+        ],
+        glass: [
+          "bg-white/10 backdrop-blur-sm",
+          "[&_.marquee-content]:text-white/90",
+          "[&_.marquee-content]:drop-shadow-[0_0_10px_rgba(255,255,255,0.3)]"
+        ]
+      },
+      size: {
+        sm: "h-8 text-sm [&_.marquee-content]:py-1",
+        default: "h-12 text-base [&_.marquee-content]:py-2",
+        lg: "h-16 text-lg [&_.marquee-content]:py-3",
+        xl: "h-20 text-xl [&_.marquee-content]:py-4",
+        "2xl": "h-24 text-2xl [&_.marquee-content]:py-5",
+        "3xl": "h-32 text-3xl [&_.marquee-content]:py-6"
+      },
+      direction: {
+        left: "",
+        right: "",
+        up: "flex-col",
+        down: "flex-col"
+      },
+      perspective: {
+        none: "[perspective:none]",
+        sm: "[perspective:500px]",
+        default: "[perspective:1000px]",
+        lg: "[perspective:1500px]",
+        xl: "[perspective:2000px]"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+      direction: "left",
+      perspective: "default"
+    }
+  }
+);
+var Marquee3D = React__namespace.forwardRef(
+  ({
+    className,
+    variant,
+    size,
+    direction = "left",
+    perspective,
+    children,
+    speed = 50,
+    pauseOnHover = false,
+    reverse = false,
+    repeat = 5,
+    gap = 0,
+    rotateX = 0,
+    rotateY = 0,
+    rotateZ = 0,
+    autoFill = false,
+    gradient = false,
+    gradientColor = "#ffffff",
+    gradientWidth = 200,
+    style,
+    ...props
+  }, ref) => {
+    const [containerWidth, setContainerWidth] = React__namespace.useState(0);
+    const [contentWidth, setContentWidth] = React__namespace.useState(0);
+    const containerRef = React__namespace.useRef(null);
+    const contentRef = React__namespace.useRef(null);
+    React__namespace.useEffect(() => {
+      const measureDimensions = /* @__PURE__ */ __name(() => {
+        if (containerRef.current && contentRef.current) {
+          const containerRect = containerRef.current.getBoundingClientRect();
+          const contentRect = contentRef.current.getBoundingClientRect();
+          if (direction === "left" || direction === "right") {
+            setContainerWidth(containerRect.width);
+            setContentWidth(contentRect.width);
+          } else {
+            setContainerWidth(containerRect.height);
+            setContentWidth(contentRect.height);
+          }
+        }
+      }, "measureDimensions");
+      measureDimensions();
+      window.addEventListener("resize", measureDimensions);
+      return () => window.removeEventListener("resize", measureDimensions);
+    }, [direction, children]);
+    const duration = React__namespace.useMemo(() => {
+      if (contentWidth === 0) return 20;
+      return contentWidth / speed;
+    }, [contentWidth, speed]);
+    const actualRepeat = React__namespace.useMemo(() => {
+      if (autoFill && containerWidth > 0 && contentWidth > 0) {
+        return Math.ceil(containerWidth / contentWidth) + 2;
+      }
+      return repeat;
+    }, [autoFill, containerWidth, contentWidth, repeat]);
+    const getAnimationProps = /* @__PURE__ */ __name(() => {
+      const distance = contentWidth + gap;
+      let animateProps = {};
+      if (direction === "left") {
+        animateProps = {
+          x: reverse ? [distance, -distance] : [-distance, distance]
+        };
+      } else if (direction === "right") {
+        animateProps = {
+          x: reverse ? [-distance, distance] : [distance, -distance]
+        };
+      } else if (direction === "up") {
+        animateProps = {
+          y: reverse ? [distance, -distance] : [-distance, distance]
+        };
+      } else if (direction === "down") {
+        animateProps = {
+          y: reverse ? [-distance, distance] : [distance, -distance]
+        };
+      }
+      return {
+        animate: animateProps,
+        transition: {
+          duration,
+          ease: "linear",
+          repeat: Infinity
+        }
+      };
+    }, "getAnimationProps");
+    const transform3D = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) rotateZ(${rotateZ}deg)`;
+    const gradientMask = gradient ? {
+      maskImage: `linear-gradient(to right, transparent, ${gradientColor} ${gradientWidth}px, ${gradientColor} calc(100% - ${gradientWidth}px), transparent)`,
+      WebkitMaskImage: `linear-gradient(to right, transparent, ${gradientColor} ${gradientWidth}px, ${gradientColor} calc(100% - ${gradientWidth}px), transparent)`
+    } : {};
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: containerRef,
+        className: utils.cn(
+          marquee3DVariants({ variant, size, direction, perspective }),
+          "flex items-center",
+          direction === "up" || direction === "down" ? "flex-col" : "flex-row",
+          className
+        ),
+        style: {
+          ...style,
+          transform: transform3D,
+          ...gradientMask
+        },
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          framerMotion.motion.div,
+          {
+            ref: contentRef,
+            className: utils.cn(
+              "marquee-content flex shrink-0 font-bold",
+              direction === "up" || direction === "down" ? "flex-col" : "flex-row",
+              pauseOnHover && "hover:[animation-play-state:paused]"
+            ),
+            style: {
+              gap: `${gap}px`
+            },
+            ...getAnimationProps(),
+            children: Array.from({ length: actualRepeat }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsxs(React__namespace.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: utils.cn(
+                    "flex shrink-0 items-center justify-center",
+                    direction === "up" || direction === "down" ? "flex-col" : "flex-row"
+                  ),
+                  style: {
+                    transform: `rotateX(${rotateX}deg) rotateY(${rotateY}deg) rotateZ(${rotateZ}deg)`,
+                    transformStyle: "preserve-3d"
+                  },
+                  children
+                }
+              ),
+              index < actualRepeat - 1 && gap > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  style: {
+                    width: direction === "up" || direction === "down" ? "100%" : `${gap}px`,
+                    height: direction === "up" || direction === "down" ? `${gap}px` : "100%"
+                  }
+                }
+              )
+            ] }, index))
+          }
+        )
+      }
+    );
+  }
+);
+Marquee3D.displayName = "Marquee3D";
+var Marquee3DPreset = {
+  Hero: React__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    Marquee3D,
+    {
+      ref,
+      variant: "rainbow",
+      size: "3xl",
+      speed: 30,
+      rotateX: -10,
+      gradient: true,
+      ...props
+    }
+  )),
+  Neon: React__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    Marquee3D,
+    {
+      ref,
+      variant: "neon",
+      size: "xl",
+      speed: 40,
+      rotateY: 5,
+      pauseOnHover: true,
+      ...props
+    }
+  )),
+  Metallic: React__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    Marquee3D,
+    {
+      ref,
+      variant: "metallic",
+      size: "lg",
+      speed: 35,
+      rotateX: -5,
+      rotateY: 2,
+      gradient: true,
+      gradientColor: "#c4c4c4",
+      ...props
+    }
+  )),
+  Fire: React__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    Marquee3D,
+    {
+      ref,
+      variant: "fire",
+      size: "2xl",
+      speed: 60,
+      rotateZ: 1,
+      gradient: true,
+      gradientColor: "#ff6600",
+      ...props
+    }
+  )),
+  Glass: React__namespace.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    Marquee3D,
+    {
+      ref,
+      variant: "glass",
+      size: "lg",
+      speed: 25,
+      rotateX: -8,
+      pauseOnHover: true,
+      gradient: true,
+      gradientColor: "rgba(255,255,255,0.9)",
+      ...props
+    }
+  ))
+};
+Marquee3DPreset.Hero.displayName = "Marquee3DPreset.Hero";
+Marquee3DPreset.Neon.displayName = "Marquee3DPreset.Neon";
+Marquee3DPreset.Metallic.displayName = "Marquee3DPreset.Metallic";
+Marquee3DPreset.Fire.displayName = "Marquee3DPreset.Fire";
+Marquee3DPreset.Glass.displayName = "Marquee3DPreset.Glass";
+var Marquee3DFloating = React__namespace.forwardRef(({ children, floatIntensity = 10, floatSpeed = 3, ...props }, ref) => {
+  const text = typeof children === "string" ? children : "";
+  return /* @__PURE__ */ jsxRuntime.jsx(Marquee3D, { ref, ...props, children: text ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex space-x-1", children: text.split("").map((char, index) => /* @__PURE__ */ jsxRuntime.jsx(
+    framerMotion.motion.span,
+    {
+      className: "inline-block",
+      animate: {
+        y: [0, -floatIntensity, 0],
+        rotateX: [0, 5, 0],
+        rotateY: [0, 2, 0]
+      },
+      transition: {
+        duration: floatSpeed,
+        ease: "easeInOut",
+        repeat: Infinity,
+        delay: index * 0.1
+      },
+      children: char === " " ? "\xA0" : char
+    },
+    index
+  )) }) : children });
+});
+Marquee3DFloating.displayName = "Marquee3DFloating";
+
+exports.Marquee3D = Marquee3D;
+exports.Marquee3DFloating = Marquee3DFloating;
+exports.Marquee3DPreset = Marquee3DPreset;
+exports.marquee3DVariants = marquee3DVariants;

package/dist/3d/marquee.mjs

@@ -0,0 +1,327 @@
+"use client";
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { motion } from 'framer-motion';
+import { cn } from '@libreapps/ui/lib/utils';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var marquee3DVariants = cva(
+  [
+    "relative overflow-hidden whitespace-nowrap",
+    "transform-gpu will-change-transform",
+    "[perspective:1000px]"
+  ],
+  {
+    variants: {
+      variant: {
+        default: [
+          "bg-background text-foreground",
+          "[&_.marquee-content]:text-current"
+        ],
+        neon: [
+          "bg-black text-cyan-400",
+          "[&_.marquee-content]:text-cyan-400",
+          "[&_.marquee-content]:drop-shadow-[0_0_10px_currentColor]",
+          "[&_.marquee-content]:animate-pulse"
+        ],
+        rainbow: [
+          "bg-black",
+          "[&_.marquee-content]:bg-gradient-to-r [&_.marquee-content]:from-red-500 [&_.marquee-content]:via-yellow-500 [&_.marquee-content]:via-green-500 [&_.marquee-content]:via-blue-500 [&_.marquee-content]:to-purple-500",
+          "[&_.marquee-content]:bg-clip-text [&_.marquee-content]:text-transparent"
+        ],
+        metallic: [
+          "bg-slate-900",
+          "[&_.marquee-content]:bg-gradient-to-b [&_.marquee-content]:from-gray-200 [&_.marquee-content]:via-gray-400 [&_.marquee-content]:to-gray-600",
+          "[&_.marquee-content]:bg-clip-text [&_.marquee-content]:text-transparent"
+        ],
+        fire: [
+          "bg-black",
+          "[&_.marquee-content]:bg-gradient-to-t [&_.marquee-content]:from-red-600 [&_.marquee-content]:via-orange-500 [&_.marquee-content]:to-yellow-400",
+          "[&_.marquee-content]:bg-clip-text [&_.marquee-content]:text-transparent",
+          "[&_.marquee-content]:drop-shadow-[0_0_20px_#ff6600]"
+        ],
+        glass: [
+          "bg-white/10 backdrop-blur-sm",
+          "[&_.marquee-content]:text-white/90",
+          "[&_.marquee-content]:drop-shadow-[0_0_10px_rgba(255,255,255,0.3)]"
+        ]
+      },
+      size: {
+        sm: "h-8 text-sm [&_.marquee-content]:py-1",
+        default: "h-12 text-base [&_.marquee-content]:py-2",
+        lg: "h-16 text-lg [&_.marquee-content]:py-3",
+        xl: "h-20 text-xl [&_.marquee-content]:py-4",
+        "2xl": "h-24 text-2xl [&_.marquee-content]:py-5",
+        "3xl": "h-32 text-3xl [&_.marquee-content]:py-6"
+      },
+      direction: {
+        left: "",
+        right: "",
+        up: "flex-col",
+        down: "flex-col"
+      },
+      perspective: {
+        none: "[perspective:none]",
+        sm: "[perspective:500px]",
+        default: "[perspective:1000px]",
+        lg: "[perspective:1500px]",
+        xl: "[perspective:2000px]"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+      direction: "left",
+      perspective: "default"
+    }
+  }
+);
+var Marquee3D = React.forwardRef(
+  ({
+    className,
+    variant,
+    size,
+    direction = "left",
+    perspective,
+    children,
+    speed = 50,
+    pauseOnHover = false,
+    reverse = false,
+    repeat = 5,
+    gap = 0,
+    rotateX = 0,
+    rotateY = 0,
+    rotateZ = 0,
+    autoFill = false,
+    gradient = false,
+    gradientColor = "#ffffff",
+    gradientWidth = 200,
+    style,
+    ...props
+  }, ref) => {
+    const [containerWidth, setContainerWidth] = React.useState(0);
+    const [contentWidth, setContentWidth] = React.useState(0);
+    const containerRef = React.useRef(null);
+    const contentRef = React.useRef(null);
+    React.useEffect(() => {
+      const measureDimensions = /* @__PURE__ */ __name(() => {
+        if (containerRef.current && contentRef.current) {
+          const containerRect = containerRef.current.getBoundingClientRect();
+          const contentRect = contentRef.current.getBoundingClientRect();
+          if (direction === "left" || direction === "right") {
+            setContainerWidth(containerRect.width);
+            setContentWidth(contentRect.width);
+          } else {
+            setContainerWidth(containerRect.height);
+            setContentWidth(contentRect.height);
+          }
+        }
+      }, "measureDimensions");
+      measureDimensions();
+      window.addEventListener("resize", measureDimensions);
+      return () => window.removeEventListener("resize", measureDimensions);
+    }, [direction, children]);
+    const duration = React.useMemo(() => {
+      if (contentWidth === 0) return 20;
+      return contentWidth / speed;
+    }, [contentWidth, speed]);
+    const actualRepeat = React.useMemo(() => {
+      if (autoFill && containerWidth > 0 && contentWidth > 0) {
+        return Math.ceil(containerWidth / contentWidth) + 2;
+      }
+      return repeat;
+    }, [autoFill, containerWidth, contentWidth, repeat]);
+    const getAnimationProps = /* @__PURE__ */ __name(() => {
+      const distance = contentWidth + gap;
+      let animateProps = {};
+      if (direction === "left") {
+        animateProps = {
+          x: reverse ? [distance, -distance] : [-distance, distance]
+        };
+      } else if (direction === "right") {
+        animateProps = {
+          x: reverse ? [-distance, distance] : [distance, -distance]
+        };
+      } else if (direction === "up") {
+        animateProps = {
+          y: reverse ? [distance, -distance] : [-distance, distance]
+        };
+      } else if (direction === "down") {
+        animateProps = {
+          y: reverse ? [-distance, distance] : [distance, -distance]
+        };
+      }
+      return {
+        animate: animateProps,
+        transition: {
+          duration,
+          ease: "linear",
+          repeat: Infinity
+        }
+      };
+    }, "getAnimationProps");
+    const transform3D = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) rotateZ(${rotateZ}deg)`;
+    const gradientMask = gradient ? {
+      maskImage: `linear-gradient(to right, transparent, ${gradientColor} ${gradientWidth}px, ${gradientColor} calc(100% - ${gradientWidth}px), transparent)`,
+      WebkitMaskImage: `linear-gradient(to right, transparent, ${gradientColor} ${gradientWidth}px, ${gradientColor} calc(100% - ${gradientWidth}px), transparent)`
+    } : {};
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: containerRef,
+        className: cn(
+          marquee3DVariants({ variant, size, direction, perspective }),
+          "flex items-center",
+          direction === "up" || direction === "down" ? "flex-col" : "flex-row",
+          className
+        ),
+        style: {
+          ...style,
+          transform: transform3D,
+          ...gradientMask
+        },
+        ...props,
+        children: /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            ref: contentRef,
+            className: cn(
+              "marquee-content flex shrink-0 font-bold",
+              direction === "up" || direction === "down" ? "flex-col" : "flex-row",
+              pauseOnHover && "hover:[animation-play-state:paused]"
+            ),
+            style: {
+              gap: `${gap}px`
+            },
+            ...getAnimationProps(),
+            children: Array.from({ length: actualRepeat }).map((_, index) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "flex shrink-0 items-center justify-center",
+                    direction === "up" || direction === "down" ? "flex-col" : "flex-row"
+                  ),
+                  style: {
+                    transform: `rotateX(${rotateX}deg) rotateY(${rotateY}deg) rotateZ(${rotateZ}deg)`,
+                    transformStyle: "preserve-3d"
+                  },
+                  children
+                }
+              ),
+              index < actualRepeat - 1 && gap > 0 && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    width: direction === "up" || direction === "down" ? "100%" : `${gap}px`,
+                    height: direction === "up" || direction === "down" ? `${gap}px` : "100%"
+                  }
+                }
+              )
+            ] }, index))
+          }
+        )
+      }
+    );
+  }
+);
+Marquee3D.displayName = "Marquee3D";
+var Marquee3DPreset = {
+  Hero: React.forwardRef((props, ref) => /* @__PURE__ */ jsx(
+    Marquee3D,
+    {
+      ref,
+      variant: "rainbow",
+      size: "3xl",
+      speed: 30,
+      rotateX: -10,
+      gradient: true,
+      ...props
+    }
+  )),
+  Neon: React.forwardRef((props, ref) => /* @__PURE__ */ jsx(
+    Marquee3D,
+    {
+      ref,
+      variant: "neon",
+      size: "xl",
+      speed: 40,
+      rotateY: 5,
+      pauseOnHover: true,
+      ...props
+    }
+  )),
+  Metallic: React.forwardRef((props, ref) => /* @__PURE__ */ jsx(
+    Marquee3D,
+    {
+      ref,
+      variant: "metallic",
+      size: "lg",
+      speed: 35,
+      rotateX: -5,
+      rotateY: 2,
+      gradient: true,
+      gradientColor: "#c4c4c4",
+      ...props
+    }
+  )),
+  Fire: React.forwardRef((props, ref) => /* @__PURE__ */ jsx(
+    Marquee3D,
+    {
+      ref,
+      variant: "fire",
+      size: "2xl",
+      speed: 60,
+      rotateZ: 1,
+      gradient: true,
+      gradientColor: "#ff6600",
+      ...props
+    }
+  )),
+  Glass: React.forwardRef((props, ref) => /* @__PURE__ */ jsx(
+    Marquee3D,
+    {
+      ref,
+      variant: "glass",
+      size: "lg",
+      speed: 25,
+      rotateX: -8,
+      pauseOnHover: true,
+      gradient: true,
+      gradientColor: "rgba(255,255,255,0.9)",
+      ...props
+    }
+  ))
+};
+Marquee3DPreset.Hero.displayName = "Marquee3DPreset.Hero";
+Marquee3DPreset.Neon.displayName = "Marquee3DPreset.Neon";
+Marquee3DPreset.Metallic.displayName = "Marquee3DPreset.Metallic";
+Marquee3DPreset.Fire.displayName = "Marquee3DPreset.Fire";
+Marquee3DPreset.Glass.displayName = "Marquee3DPreset.Glass";
+var Marquee3DFloating = React.forwardRef(({ children, floatIntensity = 10, floatSpeed = 3, ...props }, ref) => {
+  const text = typeof children === "string" ? children : "";
+  return /* @__PURE__ */ jsx(Marquee3D, { ref, ...props, children: text ? /* @__PURE__ */ jsx("div", { className: "flex space-x-1", children: text.split("").map((char, index) => /* @__PURE__ */ jsx(
+    motion.span,
+    {
+      className: "inline-block",
+      animate: {
+        y: [0, -floatIntensity, 0],
+        rotateX: [0, 5, 0],
+        rotateY: [0, 2, 0]
+      },
+      transition: {
+        duration: floatSpeed,
+        ease: "easeInOut",
+        repeat: Infinity,
+        delay: index * 0.1
+      },
+      children: char === " " ? "\xA0" : char
+    },
+    index
+  )) }) : children });
+});
+Marquee3DFloating.displayName = "Marquee3DFloating";
+
+export { Marquee3D, Marquee3DFloating, Marquee3DPreset, marquee3DVariants };