PhiaUi.Components.Glass (phia_ui v0.1.17)

Glass and frosted-surface components for PhiaUI — 5 components covering glassmorphism, acrylic noise textures, Apple Liquid Glass, and neon glow effects.

All components use pure CSS backdrop-filter (no JS hooks required).

Components

glass_card/1 — backdrop-blur card with configurable opacity
glass_panel/1 — wider glass panel for nav/sidebar overlays
acrylic_surface/1 — Windows Acrylic with noise texture overlay
liquid_glass/1 — Apple Liquid Glass 2025 style with prismatic border
neon_glow_card/1 — colored neon box-shadow card

Summary

Functions

acrylic_surface(assigns)

Windows Acrylic effect — backdrop-blur with subtle noise texture overlay.

glass_card(assigns)

Glassmorphism card with configurable backdrop-blur and opacity.

glass_panel(assigns)

Wide glass panel for nav/sidebar overlays, with more padding than glass_card.

liquid_glass(assigns)

Apple Liquid Glass 2025 — prismatic border wrapper with inset glow.

neon_glow_card(assigns)

Neon glow card with color-matched box-shadow.

Functions

acrylic_surface(assigns)

Windows Acrylic effect — backdrop-blur with subtle noise texture overlay.

Examples

<.acrylic_surface blur="md">
  Acrylic content
</.acrylic_surface>

Attributes

blur (:string) - Defaults to "lg". Must be one of "sm", "md", or "lg".
class (:string) - Defaults to nil.
Global attributes are accepted.

Slots

inner_block (required)

glass_card(assigns)

Glassmorphism card with configurable backdrop-blur and opacity.

Examples

<.glass_card blur="lg" opacity="light">
  Glass content
</.glass_card>

Attributes

blur (:string) - Defaults to "md". Must be one of "sm", "md", "lg", or "xl".
opacity (:string) - Defaults to "medium". Must be one of "light", "medium", or "dark".
class (:string) - Defaults to nil.
Global attributes are accepted.

Slots

inner_block (required)

glass_panel(assigns)

Wide glass panel for nav/sidebar overlays, with more padding than glass_card.

Examples

<.glass_panel blur="xl" opacity="dark">
  Sidebar content
</.glass_panel>

Attributes

blur (:string) - Defaults to "md". Must be one of "sm", "md", "lg", or "xl".
opacity (:string) - Defaults to "medium". Must be one of "light", "medium", or "dark".
class (:string) - Defaults to nil.
Global attributes are accepted.

Slots

inner_block (required)

liquid_glass(assigns)

Apple Liquid Glass 2025 — prismatic border wrapper with inset glow.

Examples

<.liquid_glass>
  Liquid glass content
</.liquid_glass>

Attributes

class (:string) - Defaults to nil.
Global attributes are accepted.

Slots

inner_block (required)

neon_glow_card(assigns)

Neon glow card with color-matched box-shadow.

Examples

<.neon_glow_card color="blue" intensity="lg">
  Neon content
</.neon_glow_card>

Attributes

color (:string) - Defaults to "purple". Must be one of "purple", "blue", "green", "pink", "cyan", or "orange".
intensity (:string) - Defaults to "md". Must be one of "sm", "md", or "lg".
class (:string) - Defaults to nil.
Global attributes are accepted.

Slots

inner_block (required)