# material

UI Elements⚛ TSX Live preview

Material Ripple Button

Click anywhere and a white ripple expands from the exact click point, scaled to overflow the button.

HTMLCSSJavaScriptAdvanced

3.1k25.9k6.1kOpen

Components Live preview

Floating label inputs

Labels rise, shrink and turn cyan when the field focuses or has content — classic material-style form polish.

HTMLCSSSimple

34200Open

Components Live preview

Liquid ripple click button

Soft white ripples expand from the exact click point on a gradient pill, animating size and fade then self-removing.

37200Open

Featured Animations Live preview

Ink Ripple Buttons · Rose Gold

Material-style ink ripples that bloom from the exact click point of each button. Rendered in the Rose Gold palette.

61600Open

Ink Ripple Buttons · Ocean Sky

Material-style ink ripples that bloom from the exact click point of each button. Rendered in the Ocean Sky palette.

28400Open

Ink Ripple Buttons · Mint Breeze

Material-style ink ripples that bloom from the exact click point of each button. Rendered in the Mint Breeze palette.

56800Open

Ink Ripple Buttons · Candy Pink

Material-style ink ripples that bloom from the exact click point of each button. Rendered in the Candy Pink palette.

33200Open

Ink Ripple Buttons · Royal Gold

Material-style ink ripples that bloom from the exact click point of each button. Rendered in the Royal Gold palette.

52400Open

Ink Ripple Buttons · Crimson Heat

Material-style ink ripples that bloom from the exact click point of each button. Rendered in the Crimson Heat palette.

67600Open

Ink Ripple Buttons · Deep Indigo

Material-style ink ripples that bloom from the exact click point of each button. Rendered in the Deep Indigo palette.

49700Open

Ink Ripple Buttons · Aurora Teal

Material-style ink ripples that bloom from the exact click point of each button. Rendered in the Aurora Teal palette.

83500Open

Ripple on Click

Material-style ripple expanding from the click point.

000Open