Creative Dev Blog

カード・UIパーツ系

Mosaic Flip Hover Gallery React

ホバーした項目の画像を、モザイク状の3Dタイルが中央から反転して見せるギャラリー演出です。

Y

Yutaka Kizaki

@junkbranding

2026年6月9日

読了時間: 6分

構成 / File Structure

</>Code Viewer

1

2

3

4

5

6

7

8

9

10

11

12

13

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

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

function MosaicFlipGallery() {
  const TILES_X = 12
  const TILES_Y = 9
  const TILE_SIZE = 54
  const previewRef = React.useRef(null)
  const tileRefs = React.useRef([])
  const activeIndexRef = React.useRef(0)
  const revealCountRef = React.useRef(0)
  const isAnimatingRef = React.useRef(false)
  const queuedIndexRef = React.useRef(null)
  const hoverTimerRef = React.useRef(null)
  const [activeIndex, setActiveIndex] = React.useState(0)
  const [faceImages, setFaceImages] = React.useState({ front: 0, back: 0 })

const projects = [
    {
      title: 'Archive Field',
      image: 'https://images.unsplash.com/photo-1493246507139-91e8fad9978e?auto=format&fit=crop&w=1400&q=80',
    },
    {
      title: 'Glass Quarry',
      image: 'https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=1400&q=80',
    },
    {
      title: 'Night Signal',
      image: 'https://images.unsplash.com/photo-1500534314209-a25ddb2bd429?auto=format&fit=crop&w=1400&q=80',
    },
    {
      title: 'Still Room',
      image: 'https://images.unsplash.com/photo-1494526585095-c41746248156?auto=format&fit=crop&w=1400&q=80',
    },
    {
      title: 'Soft Circuit',
      image: 'https://images.unsplash.com/photo-1519608487953-e999c86e7455?auto=format&fit=crop&w=1400&q=80',
    },
  ]

const tiles = React.useMemo(
    () =>
      Array.from({ length: TILES_X * TILES_Y }, (_, index) => {
        const row = Math.floor(index / TILES_X)
        const col = index % TILES_X

return {
          id: `${row}-${col}`,
          row,
          col,
          x: -(col * TILE_SIZE),
          y: -(row * TILE_SIZE),
        }
      }),
    []
  )

React.useEffect(() => {
    const ctx = gsap.context(() => {
      tileRefs.current.forEach((tile, index) => {
        gsap.to(tile, {
          z: () => gsap.utils.random(-28, 28),
          duration: () => gsap.utils.random(0.8, 1.6),
          repeat: -1,
          yoyo: true,
          ease: 'sine.inOut',
          delay: index * 0.01,
        })
      })
    }, previewRef)

return () => {
      window.clearTimeout(hoverTimerRef.current)
      ctx.revert()
    }
  }, [])

const revealProject = index => {
    if (index === activeIndexRef.current && !isAnimatingRef.current) return

if (isAnimatingRef.current) {
      queuedIndexRef.current = index
      return
    }

isAnimatingRef.current = true
    queuedIndexRef.current = null
    const nextRotation = revealCountRef.current + 1
    const hiddenFace = revealCountRef.current % 2 === 0 ? 'back' : 'front'
    activeIndexRef.current = index
    setActiveIndex(index)
    setFaceImages(current => ({ ...current, [hiddenFace]: index }))

window.requestAnimationFrame(() => {
      revealCountRef.current = nextRotation

gsap.to(tileRefs.current, {
        rotateY: nextRotation * 180,
        duration: 0.58,
        ease: 'power3.inOut',
        stagger: {
          grid: [TILES_Y, TILES_X],
          from: 'center',
          each: 0.018,
        },
        onComplete: () => {
          isAnimatingRef.current = false

if (
            queuedIndexRef.current !== null &&
            queuedIndexRef.current !== activeIndexRef.current
          ) {
            revealProject(queuedIndexRef.current)
          }
        },
      })
    })
  }

const scheduleReveal = index => {
    window.clearTimeout(hoverTimerRef.current)
    hoverTimerRef.current = window.setTimeout(() => revealProject(index), 60)
  }

return (
    <section className="mosaic-stage">
      <div
        ref={previewRef}
        className="mosaic-preview"
        style={{
          '--tile-size': `${TILE_SIZE}px`,
          '--tiles-x': TILES_X,
          '--tiles-y': TILES_Y,
          '--preview-width': `${TILES_X * TILE_SIZE}px`,
          '--preview-height': `${TILES_Y * TILE_SIZE}px`,
          '--front-image': `url(${projects[faceImages.front].image})`,
          '--back-image': `url(${projects[faceImages.back].image})`,
        }}
      >
        {tiles.map((tile, index) => (
          <span
            key={tile.id}
            ref={element => {
              tileRefs.current[index] = element
            }}
            className="mosaic-tile"
            style={{
              '--x': `${tile.x}px`,
              '--y': `${tile.y}px`,
            }}
          >
            <span className="mosaic-face mosaic-front" />
            <span className="mosaic-face mosaic-back" />
            <span className="mosaic-face mosaic-right" />
            <span className="mosaic-face mosaic-left" />
            <span className="mosaic-face mosaic-top" />
            <span className="mosaic-face mosaic-bottom" />
          </span>
        ))}
      </div>

<nav
        className="mosaic-list"
        aria-label="Project previews"
        onMouseLeave={() => scheduleReveal(0)}
      >
        {projects.map((project, index) => (
          <button
            key={project.title}
            className={index === activeIndex ? 'is-active' : ''}
            type="button"
            onMouseEnter={() => scheduleReveal(index)}
            onFocus={() => scheduleReveal(index)}
          >
            {project.title}
          </button>
        ))}
      </nav>
    </section>
  )
}

はじめに

小さなタイルの集合として見せる hover ギャラリーです。

この記事では document.createElement() でタイルを組み立てる部分を React の JSX に置き換え、GSAP はタイルの rotateY と奥行きの揺れだけを担当する形にしています。

今回作るもの

主役: 画像を分割して見せる3Dモザイクタイル
トリガー: リスト項目の hover / focus
対象要素: 12 x 9 のタイルグリッド
再利用先: Works一覧、ギャラリー、実績リンク、ポートフォリオのプレビュー

画像の切り出しは background-position で行います。タイルごとに --x と --y を渡して、1枚の画像が分割されて見えるようにしています。

動きの組み立て

常時の動きは、各タイルの z を小さく揺らすだけです。これで静止画のグリッドに少しだけ奥行きが出ます。

hover 時は全タイルを rotateY で 180 度ずつ加算していきます。stagger.grid を使い、中心から外側へ反転が広がるようにしているのが見せ場です。

調整しやすい値

TILES_X: 横方向の分割数
TILES_Y: 縦方向の分割数
TILE_SIZE: 1タイルのサイズ
stagger.each: 反転が広がる速さ
duration: 1タイルの反転速度

画像は添付ファイル内のものではなく、Unsplash のフリー写真 URL に差し替えています。

タグ

ReactGSAPアニメーションHoverギャラリー

表現タイプから探す

スクロール連動

スクロールに連動する多彩な表現を集めました。

パララックス系

奥行き感や視差効果で没入感を高める表現です。

カード・UIパーツ系

カードやUIパーツのインタラクティブ表現。

テキスト演出系

文字を魅せるための多彩なテキスト表現。

ページ遷移・画面切り替え系

ページやセクションのスムーズな切り替え表現。

ローディング系

読み込みを楽しく魅せるローディング表現。

マウス・インタラクション系

カーソル操作に反応するインタラクティブ表現。

背景・ビジュアル表現系

背景やビジュアルで魅せるダイナミックな表現。

3D・WebGL寄り

WebGLや3Dを活用したリッチな表現カテゴリ。

ボタン・CTA系

CTAやボタンを魅力的にするアニメーション表現。

関連記事

ReactCSSアニメーションギャラリーUIインタラクション

Studio Dialect Image Gallery React

スタジオ作品の画像を、Reactの選択状態とCSSトランジションで切り替える編集的なイメージギャラリーです。

2026年6月23日

GSAPCSSSVGJavaScriptUIUXインタラクション

Generated Image Focus Cards React

Reactで生成したSVG画像を使い、選択中の1枚だけをGSAPでなめらかに差し替える画像フォーカスカードです。

2026年6月12日

GSAPUIインタラクションアニメーション

Magnetic Cards Stagger

カードの登場アニメーションに、ホバー時のマグネット挙動を組み合わせた UI 表現です。

2026年5月19日