Effects

Several built-in sections carry optional motion effects, inspired by the free components of Aceternity UI (MIT) and rebuilt from scratch for FilamentCraft. Every effect is a setting in the section's panel, off by default, so existing pages look exactly as they did.

What every effect guarantees

• No JavaScript on your site. Effects are CSS: keyframes, gradients, masks, :has() and scroll-driven animations. Pages stay as light as before.
• Your theme's colours. Every effect is drawn from the section's colour scheme, so it fits a light scheme and a dark one without extra settings.
• Right-to-left. Tickers, beams and sweeps run the right way in Arabic and other RTL languages.
• Reduced motion. Visitors who ask their system for less motion get the finished, still state — content is never hidden behind an animation.
• Graceful fallback. Scroll-driven effects need a browser that supports animation-timeline; elsewhere the section renders its final, static layout.

Where to find them

Section	Setting	Options
Hero	Effects → Background effect	Aurora, Spotlight, Twin spotlights, Light beams, Meteors, Grid, Dots, Lamp, Starfield
	Effects → Heading effect	Word reveal (words fade in one by one), Highlight (a marker sweeps behind the highlighted phrase)
	Effects → Rotating words	One word or phrase per line, up to six, flipping in place after the heading
	Effects → Button style	Moving border, Glow border
Call to action	Background effect, Button style	Same sets as the Hero — Lamp is made for it
Features	Effect	Glowing border (a spinning gradient border), Highlight (a lingering tinted ring)
Testimonials	Layout → Moving rows	Endless rows of quotes; pick one or two rows and a speed
Gallery, Team	Effect → Focus (blur the others)	Pointing at one tile blurs and dims the rest
Timeline	Style → Scroll beam	A gradient beam fills the rail as the section scrolls
Scroll showcase	new section	A screenshot tilts back, then settles flat as it scrolls into view
Sticky reveal	new section	A pinned panel follows the step being read
Marquee	new section	An endless logo or word ticker

The fastest way to see them is a preset: Browse presets on a Hero, CTA, Features, Testimonials, Gallery, Team or Timeline section — the Modern and Bold families use the effects, Editorial and Elegant stay calmer.

Choosing well

• One loud effect per screen. A beam hero next to a moving testimonial wall competes for the eye. Pair a strong backdrop with calm sections around it.
• Lamp, Meteors and Starfield were made for dark schemes. On a light scheme they soften into a coloured haze; give that section a dark scheme when you want them at full strength.
• Backdrops sit behind the content. A solid surface card in the Hero covers them — the presets that use a backdrop switch the Hero to its minimal surface for that reason.
• Hover effects need a pointer. Glowing border, Highlight and Focus react to a mouse or keyboard focus; on touch screens the cards simply stay still.