1c:I[88678,["8500","static/chunks/8500-01a63dafd809e317.js","3725","static/chunks/3725-be3b13624e57ea5e.js","7645","static/chunks/7645-1ca8d29f22f0cbd8.js","9695","static/chunks/9695-49a7c029c38ce6ae.js","2555","static/chunks/2555-020d9d4ba9c21dc0.js","1393","static/chunks/1393-48599a8a8db9f264.js","294","static/chunks/app/library/%5Bslug%5D/page-2b5adbfbd5144294.js"],"LibraryDetail"] 1d:T24bf,"use client"; /*! * Image Stream Hero — supplied by the user from 21st.dev, added to the AI CODER Library. * Author: Ruixen (@ruixen.ui) · License: MIT * https://21st.dev/@ruixen.ui/components/image-stream-hero */ import * as React from "react"; import { cn } from "@/lib/utils"; /* ── the corridor ──────────────────────────────────────────────── * Two rails of cards ride from far behind the screen toward the * viewer. Perspective alone does the work that looks like two * animations: as a card's z grows it gets bigger *and* its screen x * sweeps outward from the vanishing point, because the projection * scales position and size by the same factor. * * Three things shape it, and each one fixes a specific artefact: * * 1. Depth is authored as *apparent size*, geometrically — each card * is a constant ratio bigger than the one behind it, all the way * out. Spacing a straight z-range evenly instead makes the near * cards tear apart from each other as the projection blows up. * 2. The rails open hard in the first stretch and then hold * (`fan` > 1). That opening cancels the — still slow — growth back * there, so the ribbon leaves the centre as a flat band, bends * once, and only then runs out on the diagonal. Parallel rails * project to a straight cone with no bend at all. * 3. Neither end of the loop is ever on screen. A card dies with its * inner edge past 50cqw, clear of the container's edge. And it is * born *across* the axis — `railBirth` is negative, so the newest * card starts on the far side and sweeps back through the centre. * That plugs the throat: the axis stays covered at every instant, * and a newborn lands behind cards that already cover it, so it * needs no fade in. Birthing on its own side instead leaves a hole * at dead centre that blinks open once every cycle. * * Every length is in `cqw` — a percentage of the container's width — * so the whole corridor keeps its proportions at any size. The * defaults were fitted numerically against a reference recording's * card-height and edge-position profile, not eyeballed. * ─────────────────────────────────────────────────────────────── */ /** * Geometry of the corridor. Every length is `cqw`, a percentage of the * container's width, so the shape is resolution-independent. * * These interact: the ribbon only stays solid while consecutive cards * overlap, which needs `exitHeight / birthHeight` spread over enough * `cards`. Raising `exitHeight`, dropping `cards`, or pulling `railExit` * in all push toward a visible tear near the frame edge. */ export type CorridorPath = { /** Strength of the projection. Lower is a wider-angle, more dramatic rush. @default 30 */ perspective?: number; /** Card width in world units. @default 18 */ cardWidth?: number; /** Card height in world units. @default 25 */ cardHeight?: number; /** Corner radius applied to each card. @default 0.4 */ cardRadius?: number; /** On-screen card height at the waist, where a card is born. @default 2.6 */ birthHeight?: number; /** On-screen card height as a card leaves the frame. @default 46 */ exitHeight?: number; /** * Lateral offset at birth. Negative starts the card across the axis so the * centre never opens up — see note 3 above. @default -11 */ railBirth?: number; /** Lateral offset once the rails have finished opening. @default 44 */ railExit?: number; /** How front-loaded the opening is. >1 opens early then holds. @default 3.3 */ fan?: number; /** Y-rotation at birth, degrees. @default 6 */ turnBirth?: number; /** Y-rotation at exit, degrees. @default 28 */ turnExit?: number; /** Keyframe stops used to trace the curve. Raise only if motion looks faceted. @default 24 */ stops?: number; }; const PATH: Required = { perspective: 30, cardWidth: 18, cardHeight: 25, cardRadius: 0.4, birthHeight: 2.6, exitHeight: 46, railBirth: -11, railExit: 44, fan: 3.3, turnBirth: 6, turnExit: 28, stops: 24, }; /** Sample the path once so the CSS keyframes trace the real curve. */ function keyframes(dir: 1 | -1, name: string, p: Required) { const steps: string[] = []; for (let s = 0; s <= p.stops; s++) { const u = s / p.stops; // Geometric in apparent size, so consecutive cards keep a constant size // ratio and the ribbon stays solid at both ends. const scale = (p.birthHeight / p.cardHeight) * Math.pow(p.exitHeight / p.birthHeight, u); const z = p.perspective * (1 - 1 / scale); const rail = p.railExit - (p.railExit - p.railBirth) * Math.pow(1 - u, p.fan); const turn = p.turnBirth + (p.turnExit - p.turnBirth) * u; steps.push( `${(u * 100).toFixed(2)}%{transform:translate3d(${(dir * rail).toFixed( 2, )}cqw,0,${z.toFixed(2)}cqw) rotateY(${(-dir * turn).toFixed(2)}deg)}`, ); } return `@keyframes ${name}{${steps.join("")}}`; } export type StreamImage = { src: string; /** Only used if you drop the decorative treatment; the corridor is aria-hidden. */ alt?: string; }; export type ImageStreamHeroProps = { /** * Images cycled onto the rails. Both rails run the same sequence, so the * corridor reads as one mirrored stream. Fewer than `cards` simply repeat. */ images: StreamImage[]; /** * Cards on each rail at once. More cards means a denser corridor, not a * faster one — spacing is derived from this and `speed`. Drop it far below * the default and consecutive cards grow too fast to stay overlapped near * the exit, which tears a gap in the ribbon. * @default 9 */ cards?: number; /** * Seconds for one card to travel the whole corridor. * @default 18 */ speed?: number; /** * Vertical placement of the corridor's axis, as a percentage of height. * @default 55 */ axis?: number; /** Override any part of the corridor geometry. Merged over the defaults. */ path?: CorridorPath; /** Content rendered above the corridor. */ children?: React.ReactNode; className?: string; }; export function ImageStreamHero({ images, cards = 9, speed = 18, axis = 55, path, children, className, ...props }: React.ComponentProps<"div"> & ImageStreamHeroProps) { const id = React.useId().replace(/[^a-zA-Z0-9]/g, ""); const right = `ish-r-${id}`; const left = `ish-l-${id}`; const card = `ish-c-${id}`; const p = React.useMemo(() => ({ ...PATH, ...path }), [path]); const css = React.useMemo( () => `${keyframes(1, right, p)}${keyframes(-1, left, p)}` + // Pausing rather than disabling keeps the corridor whole: every card is // already dropped mid-flight by its negative delay, so it freezes as a // finished still instead of collapsing onto the axis. `@media(prefers-reduced-motion:reduce){.${card}{animation-play-state:paused}}`, [right, left, card, p], ); return (

{[right, left].map((name) => Array.from({ length: cards }, (_, i) => { // Both rails walk the same sequence, so the left side mirrors // the right at every depth. const img = images[i % Math.max(images.length, 1)]; return (

{img ? (

) : null}

); }), )}

{children}

); } export default ImageStreamHero;1e:Tc2b,"use client"; import { ImageStreamHero } from "@/components/ui/image-stream-hero"; // public/images/library/image-stream-hero/ 에 넣은 사진 경로예요. 내 작업물 사진으로 바꿔 보세요. const IMAGES = [ { src: "/images/library/image-stream-hero/walk-1.webp", alt: "붉은 울 코트를 입고 런웨이를 걷는 모델" }, { src: "/images/library/image-stream-hero/walk-2.webp", alt: "카멜 트렌치코트를 입고 저녁 거리를 걷는 모델" }, { src: "/images/library/image-stream-hero/walk-3.webp", alt: "코발트 수트를 입고 사막을 걷는 모델" }, { src: "/images/library/image-stream-hero/walk-4.webp", alt: "메탈릭 재킷을 입고 네온 거리를 걷는 모델" }, { src: "/images/library/image-stream-hero/walk-5.webp", alt: "흰 옷을 입고 스튜디오를 걷는 모델" }, { src: "/images/library/image-stream-hero/walk-6.webp", alt: "차콜 블레이저를 입고 안개 낀 거리를 걷는 모델" }, { src: "/images/library/image-stream-hero/walk-7.webp", alt: "에메랄드 니트 차림으로 노을 산책로를 걷는 모델" }, { src: "/images/library/image-stream-hero/walk-8.webp", alt: "파스텔 스트리트웨어를 입고 걷는 모델" }, ]; export default function Demo() { return ( {/* 위아래를 어둡게 덮어 글자가 사진 위에서도 또렷하게 읽히도록 합니다. */}

{/* 통로는 화면 폭(cqw) 기준이라 세로로 긴 휴대폰에서는 얇은 띠가 돼요. 그때는 글자를 띠 바로 위아래로 모읍니다. */}

AI CODER · LOOKBOOK

작품이 먼저
걸어 나오는 첫 화면

이미지만 바꾸면 소실점에서 쏟아지는 3D 통로가 그대로 다시 만들어져요.

룩북 보기 →

); }1f:T23c9b,

12:["$","main",null,{"id":"main-content","tabIndex":-1,"className":"library_page__IxXwj","children":[["$","div",null,{"className":"library_headerSpace__cyKqF","children":"$L1b"}],["$","script",null,{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"LearningResource\",\"name\":\"이미지 스트림 히어로\",\"description\":\"사진이 두 줄로 소실점에서 쏟아져 나오는 3D 원근 히어로\",\"url\":\"https://aicoder.kr/library/image-stream-hero\",\"inLanguage\":\"ko-KR\",\"learningResourceType\":\"코드 예제 및 실습\",\"educationalLevel\":\"응용\"},{\"@type\":\"BreadcrumbList\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"홈\",\"item\":\"https://aicoder.kr/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"라이브러리\",\"item\":\"https://aicoder.kr/library\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"이미지 스트림 히어로\",\"item\":\"https://aicoder.kr/library/image-stream-hero\"}]}]}"}}],["$","div",null,{"className":"library_container__grs86","children":["$","$L1c",null,{"item":{"slug":"image-stream-hero","tags":["React","Tailwind","CSS 3D","컨테이너 쿼리","keyframes","히어로"],"files":[{"name":"image-stream-hero.tsx","content":"$1d","language":"tsx"},{"name":"demo.tsx","content":"$1e","language":"tsx"}],"level":"응용","title":"이미지 스트림 히어로","author":"Ruixen (@ruixen.ui)","license":"MIT · Ruixen","category":"hero","exercise":"IMAGES를 내 작업물 사진으로 바꾸고 speed를 18에서 10으로, cards를 9에서 12로 바꿔 통로의 속도와 밀도를 비교해 보세요. path의 perspective를 20과 45로 바꿔 원근감이 어떻게 달라지는지 보고, 동작 줄이기 설정에서 화면이 멈춘 장면으로 남는지도 확인하세요.","sourceUrl":"https://21st.dev/@ruixen.ui/components/image-stream-hero","objectives":["perspective와 translate3d로 원근 투영이 카드의 크기와 위치를 함께 바꾸는 원리 이해하기","곡선을 코드로 샘플링해 @keyframes 문자열을 만들고

작품이 먼저 걸어 나오는 첫 화면

작품이 먼저
걸어 나오는 첫 화면

예제에 포함된 파일