TIPSBLOCKS / BACK TO TOP COLLECTION

Useful first.
Beautiful always.

どのホームページにも置けること。静止時に美しいこと。通常時の動きに意味があること。ホバーに急な切り替えがないこと。24案を一つずつ見直しました。

24 REFINED COMPONENTSAMBIENT + HOVER + SCROLLTB-2133 — 2156

TB-2133タイポグラフィ / 168 × 64

NORMAL / INTERACTIVE

ASCENDER

実動作 ↗

通常6.8秒ごとに上昇線がゆっくり伸び、短く静止

ホバー文字の下線が広がり、矢印が上昇

TB-2134正方形 / 78 × 78

NORMAL / INTERACTIVE

INK FRAME

実動作 ↗

通常細い光が左縁を上に流れ、余韻を残す

ホバー背景色が滑らかに変わり、矢印が上昇

TB-2135二重円形 / 84 × 84

NORMAL / INTERACTIVE

HALO

実動作 ↗

通常外輪が1回だけ広がり、薄く消える

ホバー外輪が近づき、内側が静かに濃くなる

TB-2136右サイドタブ / 54 × 136

NORMAL / INTERACTIVE

SIDE RIBBON

実動作 ↗

通常左側の短いインジケータがゆっくり上がる

ホバー左へ8pxほど引き出され、色が深まる

TB-2137横長ピル / 184 × 58

NORMAL / INTERACTIVE

SOFT PILL

実動作 ↗

通常矢印に控えめな上昇モーションを短く挿入

ホバー左の円に色が広がり、文字が少し移動

TB-2138文字とライン / 179 × 57

NORMAL / INTERACTIVE

EDITORIAL LINE

実動作 ↗

通常下線の一部だけが時間をかけて移動

ホバー矢印が伸び、下線の色が変わる

TB-2139角丸正方形 / 72 × 72

NORMAL / INTERACTIVE

MONO CORNER

実動作 ↗

通常上縁を小さな光点がゆっくり横断

ホバー内側の線と背景が入れ替わる

TB-2140輪郭円 / 92 × 92

NORMAL / INTERACTIVE

ORBIT RING

実動作 ↗

通常外輪の短い弧がゆっくり巡る

ホバーリングが引き締まり、中央の矢印が上昇

TB-2141アーチ型 / 71 × 104

NORMAL / INTERACTIVE

PORTICO

実動作 ↗

通常頂部の一本線が少し上昇して戻る

ホバー背景が深まり、矢印が滑らかに持ち上がる

TB-2142細長い枠 / 153 × 54

NORMAL / INTERACTIVE

OPEN LABEL

実動作 ↗

通常左の線が短く伸縮、止まる

ホバー枠の内側に色が満ちて文字色が変化

TB-2143ワイドタブ / 127 × 66

NORMAL / INTERACTIVE

NORTH BAR

実動作 ↗

通常上端のアクセントが水平に移動

ホバー文字と矢印の余白を詰めて背景を反転

TB-2144オープンフレーム / 88 × 88

NORMAL / INTERACTIVE

OPEN CORNERS

実動作 ↗

通常4隅のうち対角の短線が順番に伸びる

ホバー四隅が内側へ数px近づく

TB-2145オフセット正方形 / 82 × 82

NORMAL / INTERACTIVE

OFFSET TILE

実動作 ↗

通常影がごくゆっくり呼吸し立体感が変わる

ホバー本体が3px持ち上がり影が定着

TB-2146縦長スリム / 62 × 119

NORMAL / INTERACTIVE

UPLINE

実動作 ↗

通常細線内の明るい部分が上に移動

ホバー左のラインが強まり、全体の色が反転

TB-2147右サイドレール / 50 × 148

NORMAL / INTERACTIVE

EDGE GLOW

実動作 ↗

通常サイドの光が上へ流れ、しばらく休止

ホバー左へ6px開いて影が柔らかくなる

TB-2148横長コンパクト / 168 × 54

NORMAL / INTERACTIVE

SIGNAL BAR

実動作 ↗

通常小さな三つの点が順番に明るくなる

ホバー右の矢印が上昇し、黒から柔らかい緑へ

TB-2149進捗リング / 90 × 90

NORMAL / INTERACTIVE

READING RING

実動作 ↗

通常実スクロール進捗に連動、矢印に穏やかな合図

ホバー輪郭が太くなり、矢印にアクセント色

TB-2150アウトラインピル / 166 × 55

NORMAL / INTERACTIVE

FINE PILL

実動作 ↗

通常周囲の枠にさりげない反射が流れる

ホバー背景色と文字色がゆっくり入れ替わる

TB-2151上下罫線 / 174 × 55

NORMAL / INTERACTIVE

TWIN RULE

実動作 ↗

通常上の線を短いアクセントが横移動

ホバー線幅が変化し矢印が上昇

TB-2152浮遊スクエア / 82 × 82

NORMAL / INTERACTIVE

ELEVATED

実動作 ↗

通常光と影のコントラストが静かに呼吸

ホバー本体が3px浮いて影が増す

TB-2153右サイド進捗 / 57 × 155

NORMAL / INTERACTIVE

SIDE METER

実動作 ↗

通常ページの実スクロール量でメーターが伸びる

ホバーサイドの縁が強調され、矢印が上昇

TB-2154フッター組込 / 224 × 60

FOOTER DOCK

実動作 ↗

通常下辺に沿って短い光がゆっくり走る

ホバー文字と矢印がわずかに上昇

TB-2155二段タイル / 75 × 84

NORMAL / INTERACTIVE

DUOTONE

実動作 ↗

通常上下を仕切る線がわずかに往復

ホバー上の矢印領域が少し広がる

TB-2156ガラスピル / 184 × 61

NORMAL / INTERACTIVE

LUMEN

実動作 ↗

通常薄い反射の帯が間隔を空けて移動

ホバー透過感と縁の色を滑らかに変える