Aceternity UIを学ぶ

tkry

最近のイケイケサイトのコンポーネント実装を学びたい
https://ui.aceternity.com/

tkry

気に入ったやつを列挙する

tkry

意外とシンプルにmotionやcssアニメーションで構成されてる気がしてきた

tkry

 Animated Modalhttps://ui.aceternity.com/components/animated-modal
modalの実装だけ真似したい

tkry

Animated Testimonials

tkry

 Aurora Backgroundhttps://ui.aceternity.com/components/aurora-background
これ一番好きかも

Heroで使う

tkry

まさかのCSSオンリー

tkry

 Background Beamshttps://ui.aceternity.com/components/background-beams
HeroかBentoGridの中身

tkry

 Background Boxeshttps://ui.aceternity.com/components/background-boxes
HeroかBentoGridの中身

tkry

動く棒、cssアニメーションや（sparkleの中のanimate-moveがついてるdiv）

tkry

 Evervault Cardhttps://ui.aceternity.com/components/evervault-card
マトリックスっぽいのできそう

tkry

Feature Sections

tkry

Simple with card gradient のGrid/GridPatternがランダムで色つけてる感じもかっこいいな
カードの一つとして良さそう

tkry

Flip Words

tkry

動かしてないけど、key={currentWord}で再レンダリングさせてる感じかな

tkry

爆散してるあたりは、親のdivタグのexit部分っぽい

        exit={{
          opacity: 0,
          y: -40,
          x: 40,
          filter: "blur(8px)",
          scale: 2,
          position: "absolute",
        }}

tkry

Focus Cards

tkry

useStateでhoverしてるかみて、cssあててるだけ

tkry

Grid and Dot Backgrounds

tkry

svg画像と[mask-image:radial-gradient(ellipse_at_center,transparent_20%,black)]でぼやけてる感じ

tkry

mini-svg-data-uriというやつでbgImageにしてる

tkry

Hero Highlight

tkry

 Hover Border Gradienthttps://ui.aceternity.com/components/hover-border-gradient
カードかボタン

tkry

Infinite Moving Cards

tkry

 Macbook Scrollhttps://ui.aceternity.com/components/macbook-scroll
これそのものより、キーボードを実装したい

tkry

Moving Border

tkry

SVG Mask Effect

tkry

[mask-image:url(/mask.svg)] [mask-size:40px] [mask-repeat:no-repeat] svgを重ねてる

tkry

Tailwind CSS buttons

tkry

Text Hover Effect

tkry

svgだ...svgのことを何も知らない

tkry

Text generates as if it is being typed on the screen.

tkry

 Vortex Backgroundhttps://ui.aceternity.com/components/vortex
Heroかな

銀河系的なの作れそう

tkry

 Wavy Backgroundhttps://ui.aceternity.com/components/wavy-background
Heroかカード

Animated Modal

Animated Testimonials

Aurora Background

Background Beams

Background Boxes

Background Gradient

Bento Grid

Cards

Evervault Card

Feature Sections

Flip Words

Focus Cards

Grid and Dot Backgrounds

Hero Highlight

Hover Border Gradient

Infinite Moving Cards

Macbook Scroll

Moving Border

SVG Mask Effect

Tailwind CSS buttons

Text Hover Effect

Text generates as if it is being typed on the screen.

Vortex Background

Wavy Background