Create visually stunning presentations with animated background components.
MasonryBackground
Creates a full-screen masonry grid with animated crossfade image transitions.
tsx
import { MasonryBackground } from "@reactslides/core";
const images = ["/img1.jpg", "/img2.jpg", "/img3.jpg"];
const tileLayout = [
{ colSpan: 3, rowSpan: 2 },
{ colSpan: 2, rowSpan: 2 },
{ colSpan: 2, rowSpan: 1 },
];
<MasonryBackground
images={images}
tileLayout={tileLayout}
gridColumns={12}
gridRows={6}
fillMode="progressive"
swapInterval={3000}
/>NebulaBackground
Creates a full-screen animated starfield with nebula glow effects.
tsx
import { NebulaBackground } from "@reactslides/core";
<NebulaBackground isActive={true}>
<div className="relative z-10 text-center">
<h1 className="text-6xl font-bold">Your Title</h1>
</div>
</NebulaBackground>TrustedByMarquee
Creates an infinite scrolling marquee effect for logos or testimonials.
tsx
import { TrustedByMarquee } from "@reactslides/core";
const rows = [
[{ name: "Company A", color: "#ffffff" }],
[{ name: "Company B", color: "#60a5fa" }],
];
<TrustedByMarquee
rows={rows}
isActive={true}
rowDuration={60}
gap={48}
/>