cover-flow-showcase

KO | EN

gitlite — search

#php #java #dotfiles #android #python #game #hacktoberfest #javascript #c-sharp #go #translation #dotnet

cover-flow-showcase

★ 69 Open GitHub ↗

Liquid-glass React Cover Flow with 3D depth, reflections, and tuned motion. / 液态玻璃 3D 封面流组件

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Glass Cover Flow

![Glass Cover Flow preview](https://raw.githubusercontent.com/opc8838-hub/cover-flow-showcase/main/public/assets/cover.png)

A standalone React Cover Flow component inspired by classic iTunes-style browsing. It includes the dark liquid-glass stage, 3D card depth, reflections, pagination dots, mouse-follow movement, wheel navigation, and a soft snap-to-center motion.

## Live Demo

https://opc8838-hub.github.io/cover-flow-showcase/

## Demo Video

[Watch or download the demo video](https://github.com/opc8838-hub/cover-flow-showcase/raw/main/public/assets/cover-flow-demo.mp4)

## Features

- Mouse movement drives the cards horizontally.
- Wheel scrolling moves through cards and settles the nearest card in the center.
- Center card has a larger, calmer presentation.
- Cards wrap continuously in a loop.
- Works with your own images, or CSS placeholder covers.
- No brand assets, agent logic, backend logic, or bottom navigation included.

## Quick Start

```bash
npm install
npm run dev
```

Then open the local Vite URL printed in your terminal.

## Usage

```tsx
import { CoverFlow, type CoverFlowItem } from "./CoverFlow";

const items: CoverFlowItem[] = [
  {
    title: "Aurora",
    kicker: "Cover 01",
    image: "/covers/aurora.jpg",
    palette: ["#2563eb", "#020617"],
  },
  {
    title: "Signal",
    kicker: "Cover 02",
    palette: ["#f59e0b", "#111827"],
  },
];

export function App() {
  return <CoverFlow items={items} onSelect={(item) => console.log(item.title)} />;
}
```

Put your own cover images in `public/covers` and reference them with `/covers/name.jpg`.

## Motion Parameters

The current motion is tuned for a slower, less dizzy Cover Flow feel:

- Settle speed: `0.145`
- Wheel sensitivity: `delta / 230`
- Mouse sensitivity: `delta / 165`
- Card transition: `180ms cubic-bezier(0.22, 0.72, 0.18, 1)`
- Center scale range: `0.835` to `1.09`
- Side rotation: `62deg` with `Math.pow(progress, 1.65)`
- Card spacing: `306px` for the first offset, then `136px`

## Build

```bash
npm run build
```

## License

MIT

cover-flow-showcase

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README