フォトフィード

写真をスワイプで送り、サムネイルで移動し、どの写真も全画面で開いて、詳細を引き上げます。

MotionPagerMotionHighlightMotionZoomMotionSheet

サンプルを準備中…

JavaScript がオフになっています。下のコードがサンプルの全体です。

App.jsx

import { useState } from 'react';
import {
  MotionHighlight,
  MotionPager,
  MotionSheet,
  MotionZoom,
  motionTokens,
} from '@kkwaenggwari/animated-chorus';
import './styles.css';

// Generated scenes, so the example needs no image files.
function scene(sky, land, sun) {
  const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 260">
    <rect width="400" height="260" fill="${sky}"/>
    <circle cx="300" cy="80" r="34" fill="${sun}"/>
    <path d="M0 190 Q120 110 220 180 T400 150 V260 H0Z" fill="${land}"/>
    <path d="M0 225 Q150 170 260 215 T400 205 V260 H0Z" fill="#0e2e24"/>
  </svg>`;
  return `data:image/svg+xml,${encodeURIComponent(svg)}`;
}

const photos = [
  {
    id: 'dawn',
    title: 'Dawn ridge',
    place: 'North trail',
    src: scene('#eaf6f0', '#43c58f', '#ffffff'),
  },
  {
    id: 'forest',
    title: 'Deep forest',
    place: 'Valley road',
    src: scene('#176b52', '#2e8f6d', '#eaf6f0'),
  },
  {
    id: 'meadow',
    title: 'Meadow',
    place: 'South field',
    src: scene('#cfe8dc', '#176b52', '#f4faf7'),
  },
  {
    id: 'night',
    title: 'Night hills',
    place: 'Lookout',
    src: scene('#0e2e24', '#176b52', '#43c58f'),
  },
];

export default function App({ gap = 12, spring = 'default' }) {
  const [page, setPage] = useState(0);
  const [details, setDetails] = useState(false);
  // "default" is not a preset: undefined keeps the component's own motion.
  const transition = motionTokens.spring[spring];
  const photo = photos[page];

  return (
    <div className="feed">
      <MotionPager
        items={photos}
        index={page}
        onIndexChange={setPage}
        gap={gap}
        transition={transition}
        renderItem={(item) => (
          <MotionZoom
            src={item.src}
            width={400}
            height={260}
            className="photo"
            transition={transition}
          />
        )}
      />
      <div className="bar">
        <MotionHighlight
          items={photos}
          value={photo.id}
          onValueChange={(key) => setPage(photos.findIndex((item) => item.id === key))}
          transition={transition}
          className="thumbs"
          itemClassName="thumb"
          highlightClassName="thumb-on"
          renderItem={(item) => <img src={item.src} width={48} height={32} />}
        />
        <button className="info" onClick={() => setDetails(true)}>
          Details
        </button>
      </div>
      <MotionSheet open={details} onOpenChange={setDetails} className="sheet">
        <span className="handle" />
        <h2>{photo.title}</h2>
        <p>
          {photo.place} · photo {page + 1} of {photos.length}
        </p>
        <button onClick={() => setDetails(false)}>Close</button>
      </MotionSheet>
    </div>
  );
}

styles.css

.feed {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  max-width: 560px;
  min-height: 420px;
  margin: 0 auto;
  padding: 24px 20px;
  align-content: start;
}

.photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 400 / 260;
  border-radius: 18px;
  object-fit: cover;
  cursor: zoom-in;
  user-select: none;
  -webkit-user-drag: none;
}

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* On a narrow phone the thumbnails shrink; the Details button keeps its size. */
.thumbs {
  display: flex;
  min-width: 0;
  gap: 6px;
}

.thumb {
  flex: 0 1 auto;
  min-width: 0;
  padding: 3px;
  border: 0;
  border-radius: 10px;
  background: none;
  cursor: pointer;
}

.thumb img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 7px;
}

.thumb-on {
  border-radius: 10px;
  box-shadow: inset 0 0 0 2px #176b52;
}

.info {
  flex: none;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid #cfe8dc;
  border-radius: 999px;
  background: #fff;
  font:
    600 14px system-ui,
    sans-serif;
  cursor: pointer;
}

.sheet {
  gap: 6px;
  padding: 12px 22px 22px;
  border-radius: 22px 22px 0 0;
  background: #fff;
  box-shadow: 0 -8px 30px rgba(14, 46, 36, 0.18);
}

.handle {
  justify-self: center;
  width: 44px;
  height: 5px;
  border-radius: 3px;
  background: #cfe8dc;
}

.sheet h2 {
  margin: 6px 0 0;
  font:
    750 22px system-ui,
    sans-serif;
  color: #0e2e24;
}

.sheet p {
  margin: 0;
  color: #5b616b;
}

.sheet button {
  min-height: 46px;
  margin-top: 12px;
  border: 0;
  border-radius: 999px;
  background: #176b52;
  color: #fff;
  font:
    650 15px system-ui,
    sans-serif;
  cursor: pointer;
}

しくみ

MotionPager はスワイプやフリック 1 回につき 1 ページめくります。
MotionHighlight が現在のサムネイルを示し、ページャーを動かします。
MotionZoom は写真をその場から開き、ドラッグで払うと閉じます。
MotionSheet は詳細を表示し、ドラッグ、背景、Escape で閉じます。

フォトフィード

しくみ

ほかのサンプル

検索