Skip to content

Effects (Fx)

The Fx effects module provides zero-JavaScript visual effects using pure CSS. Add animations, transitions, and micro-interactions to your components without writing a single line of JavaScript.

Goal

Master using Faststrap's built-in effects system to create smooth, professional animations and interactions that enhance user experience.

Quick Start

from faststrap import Card, Fx

# Card with fade-in animation and hover lift effect
Card(
    "Content here",
    cls=f"{Fx.fade_in} {Fx.hover_lift}"
)

Effect Categories

1. Entrance Animations

Appear on page load or HTMX swap.

# Fade in
Card("Content", cls=Fx.fade_in)

# Slide up
Card("Content", cls=Fx.slide_up)

# Slide down
Card("Content", cls=Fx.slide_down)

# Slide from left
Card("Content", cls=Fx.slide_left)

# Slide from right
Card("Content", cls=Fx.slide_right)

# Zoom in
Card("Content", cls=Fx.zoom_in)

# Bounce in
Card("Content", cls=Fx.bounce_in)

2. Hover Interactions

Trigger on mouseover.

# Lift on hover (subtle elevation)
Card("Hover me", cls=Fx.hover_lift)

# Scale on hover (slight zoom)
Button("Click me", cls=Fx.hover_scale)

# Glow effect
Card("Glowing", cls=Fx.hover_glow)

# Tilt effect
Card("Tilt", cls=Fx.hover_tilt)

# Color shift
Button("Colorize", cls=Fx.hover_colorize)

3. Loading States

For HTMX indicators.

# Spinning animation
Div(Icon("arrow-repeat"), cls=Fx.spin)

# Pulsing animation
Div("Loading...", cls=Fx.pulse)

# Shimmer effect (skeleton loading)
Div(cls=Fx.shimmer, style={"width": "200px", "height": "20px"})

4. Visual Effects

Glass morphism and shadows.

# Glass effect (frosted glass)
Card("Glass card", cls=Fx.glass)

# Soft shadow
Card("Soft shadow", cls=Fx.shadow_soft)

# Sharp shadow
Card("Sharp shadow", cls=Fx.shadow_sharp)

# Gradient shift
Div("Gradient", cls=Fx.gradient_shift)

5. Modifiers

Control speed and delay.

# Speed modifiers
Card("Fast", cls=f"{Fx.fade_in} {Fx.fast}")  # 150ms
Card("Slow", cls=f"{Fx.fade_in} {Fx.slow}")  # 500ms
Card("Slower", cls=f"{Fx.fade_in} {Fx.slower}")  # 1000ms

# Delay modifiers
Card("Delayed", cls=f"{Fx.fade_in} {Fx.delay_sm}")  # 200ms delay
Card("More delay", cls=f"{Fx.fade_in} {Fx.delay_lg}")  # 500ms delay

Combining Effects

from faststrap import Card, Fx

# Fade in with hover lift and soft shadow
Card(
    "Beautiful card",
    cls=f"{Fx.fade_in} {Fx.hover_lift} {Fx.shadow_soft}"
)

# Slide up fast with delay and hover scale
Card(
    "Animated card",
    cls=f"{Fx.slide_up} {Fx.fast} {Fx.delay_sm} {Fx.hover_scale}"
)

# Glass card with glow on hover
Card(
    "Glass effect",
    cls=f"{Fx.glass} {Fx.hover_glow}"
)

Common Recipes

Product Card with Effects

Card(
    Img(src="product.jpg", cls="card-img-top"),
    Div(
        H5("Product Name", cls="card-title"),
        P("$99.99", cls="card-text"),
        Button("Add to Cart", variant="primary"),
        cls="card-body"
    ),
    cls=f"{Fx.fade_in} {Fx.hover_lift} {Fx.shadow_soft}"
)

Hero Section with Staggered Animations

from faststrap import Hero, Fx

Hero(
    H1("Welcome", cls=f"{Fx.fade_in}"),
    P("Subtitle", cls=f"{Fx.fade_in} {Fx.delay_sm}"),
    Button("Get Started", cls=f"{Fx.fade_in} {Fx.delay_md}")
)

Loading Indicator

Div(
    Spinner(cls=Fx.spin),
    "Loading...",
    cls="text-center"
)

Available Effects Reference

Entrance Animations

  • Fx.fade_in - Fade in
  • Fx.slide_up - Slide from bottom
  • Fx.slide_down - Slide from top
  • Fx.slide_left - Slide from right
  • Fx.slide_right - Slide from left
  • Fx.zoom_in - Zoom in
  • Fx.bounce_in - Bounce in

Hover Effects

  • Fx.hover_lift - Lift on hover
  • Fx.hover_scale - Scale on hover
  • Fx.hover_glow - Glow on hover
  • Fx.hover_tilt - Tilt on hover
  • Fx.hover_colorize - Color shift on hover

Loading States

  • Fx.spin - Spinning animation
  • Fx.pulse - Pulsing animation
  • Fx.shimmer - Shimmer effect

Visual Effects

  • Fx.glass - Glass morphism
  • Fx.shadow_soft - Soft shadow
  • Fx.shadow_sharp - Sharp shadow
  • Fx.gradient_shift - Gradient animation

Modifiers

Speed: - Fx.fast - 150ms - Fx.slow - 500ms - Fx.slower - 1000ms

Delay: - Fx.delay_xs - 100ms - Fx.delay_sm - 200ms - Fx.delay_md - 300ms - Fx.delay_lg - 500ms - Fx.delay_xl - 1000ms

Accessibility

All effects respect prefers-reduced-motion media query. Users who have enabled reduced motion in their OS settings will see instant transitions instead of animations.

faststrap.core.effects.Fx

Zero-JS Effects Helper. Combines with cls argument in FastHTML components.

Source code in src/faststrap/core/effects.py 
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
class Fx:
    """
    Zero-JS Effects Helper.
    Combines with `cls` argument in FastHTML components.
    """

    # --------------------------------------------------------------------------
    # 1. Base Class (Required for transitions to work properly)
    # --------------------------------------------------------------------------
    base = "fx"

    # --------------------------------------------------------------------------
    # 2. Entrance Animations (Appear on load/swap)
    # --------------------------------------------------------------------------
    fade_in = "fx-fade-in"
    slide_up = "fx-slide-up"  # Roadmap compliant
    slide_down = "fx-slide-down"  # Roadmap compliant
    slide_left = "fx-slide-left"  # Roadmap compliant
    slide_right = "fx-slide-right"  # Roadmap compliant
    zoom_in = "fx-zoom-in"
    bounce_in = "fx-bounce-in"  # New

    # Contextual aliases for backward compatibility or clearer intent
    fade_in_up = slide_up
    fade_in_down = slide_down

    # --------------------------------------------------------------------------
    # 3. Hover Interactions (Trigger on mouseover)
    # --------------------------------------------------------------------------
    hover_lift = "fx-hover-lift"
    hover_scale = "fx-hover-scale"
    hover_glow = "fx-hover-glow"
    hover_tilt = "fx-hover-tilt"  # New
    hover_colorize = "fx-hover-colorize"

    # --------------------------------------------------------------------------
    # 4. Loading States (For hx-indicator)
    # --------------------------------------------------------------------------
    spin = "fx-spin"
    pulse = "fx-pulse"
    shimmer = "fx-shimmer"

    # --------------------------------------------------------------------------
    # 5. Visual Effects (Glass, Shadows)
    # --------------------------------------------------------------------------
    glass = "fx-glass"
    shadow_soft = "fx-shadow-soft"
    shadow_sharp = "fx-shadow-sharp"
    gradient_shift = "fx-gradient-shift"

    # --------------------------------------------------------------------------
    # 6. Modifiers (Tokens)
    # --------------------------------------------------------------------------
    # Speed
    fast = "fx-fast"  # 150ms
    slow = "fx-slow"  # 500ms
    slower = "fx-slower"  # 1000ms

    # Delay
    delay_xs = "fx-delay-xs"  # 100ms
    delay_sm = "fx-delay-sm"  # 200ms
    delay_md = "fx-delay-md"  # 300ms
    delay_lg = "fx-delay-lg"  # 500ms
    delay_xl = "fx-delay-xl"  # 1000ms