웹솔루션개발 26년 노하우! 해피CGI의 모든것

[해피CGI][cgimall] 대량의 코퍼스에 기반한 일본어 이야기 작성 AI 플랫폼 AI Novelist

해피CGI윤실장 — Fri, 22 May 2026 09:07:07 +0900

AI Novelist 사용자가 예제 프롬프트나 자신의 텍스트에서 시작하여 AI를 사용하여 이야기를 쓸 수 있습니다. 참고로 일본어 작성됩니다.

<주요기능>
- AI 기반 이야기 작성
- 대형 일본어 모델
- 영감을 위한 다양한 예제 프롬프트 제공

<사용방법>
회원가입 없이도 프롬프트로 기본 스토리 라인을 적으면 이야기를 생성해줍니다.

가격정책
- 프리 체험플랜 : 0원 월 5,000자 생성
- 스탠다드 입문작가용: 월 10달러 ~ 15달러 : 월 10만 자 생성
- 프로 전업 작가용 : 월 25달러 ~ 30달러 : 무제한 생서, 최신형 AI 모델 사용, 무제한 세계관 관리

전문이든 재미든 인공지원과 함께 일본어로 된 소설을 쓰고 싶으면 AI가 보조 혹은 주체가 되어 잘 쓸 수 있도록 도와주는 도구입니다.

[해피CGI][cgimall] 부드러운 다크/라이트 모드 전환 라이브러리 - DayniteJS

해피CGI윤실장 — Thu, 21 May 2026 09:07:13 +0900

■ 라이센스

MIT 라이센스

■ 상세 설명

Day/Nite는 웹사이트에서 라이트 모드와 다크 모드를 손쉽게 전환할 수 있도록 구현된 UI 컴포넌트이다.
사용자의 환경 설정이나 직접 선택에 따라 테마를 변경할 수 있으며, CSS와 JavaScript를 조합하여 비교적 간단하게 적용할 수 있다.

일반적으로 다크모드는 어두운 배경과 밝은 텍스트를 사용하여 눈의 피로를 줄이고 가독성을 높이기 위한 UI 방식이다.

이 예제는 다음과 같은 방식으로 동작한다.

- 토글 버튼 클릭 시 라이트 / 다크 모드 전환

- CSS 클래스 또는 데이터 속성 변경을 통해 테마 적용

- 필요 시 localStorage를 활용하여 사용자 선택 상태 유지

또한 CSS의 prefers-color-scheme 미디어 쿼리를 활용하면

사용자의 운영체제 설정(다크/라이트)에 맞춰 자동 적용도 가능하다.

구현 구조는 크게 다음과 같다.

HTML

- 토글 버튼 또는 스위치 UI 구성

CSS

- 라이트 / 다크 테마 스타일 정의

- 변수 또는 클래스 기반 스타일 분기 처리

JavaScript

- 클릭 이벤트로 테마 전환

- 선택 상태 저장 및 복원 처리

■ 주요 특징

다크모드 / 라이트모드 전환 지원

간단한 구조로 빠른 적용 가능

사용자 설정 저장(localStorage) 가능

시스템 테마 자동 감지 가능

■ 활용 포인트

관리자 페이지 UI 개선

사용자 편의성 향상 (야간 모드 지원)

최신 웹 트렌드 대응

디자인 테마 확장성 확보

■ 사용 기술

HTML

CSS (prefers-color-scheme, 변수)

JavaScript

■ 추천 사용 환경

홈페이지 및 쇼핑몰

관리자 페이지

SaaS / 웹솔루션 UI

콘텐츠 사이트

■ 참고사항

데모사이트에서 다운로드 받은 파일은 npm 환경에서만 구동됩니다.
본 글에 첨부된 파일을 다운로드 받으면 examples/test.html 파일이 있습니다.
해당 파일은 vanilla js 로 구성된 파일이므로 브라우저에서 바로 실행해 볼 수 있습니다.

[해피CGI][cgimall] 개발자를 위한 5,600개 이상의 브랜드 SVG 아이콘 – theSVG

해피CGI윤실장 — Wed, 20 May 2026 09:05:17 +0900

■ 라이센스

MIT 라이센스

■ 상세 설명

theSVG는 GitHub, Figma, Google 등 다양한 브랜드 아이콘을 SVG 형태로 제공하는 아이콘 라이브러리이다.

해당 라이브러리는 npm 패키지 형태로도 제공되지만, 일반 웹사이트에서는 별도의 설치 없이도 쉽게 사용할 수 있다는 것이 가장 큰 장점이다.

기본적으로 다음과 같은 방식으로 활용할 수 있다.

CDN 방식
이미지 URL을 통해 아이콘을 바로 불러와 사용할 수 있다.
HTML에 <img> 태그만으로 적용 가능하여 가장 간편하다.
SVG 직접 삽입
사이트에서 SVG 코드를 복사하여 HTML에 직접 삽입하는 방식이다.
외부 의존성이 없어 안정적이며 디자인 커스터마이징에 유리하다.
npm 패키지 방식
React, Vue 등 프론트엔드 프로젝트에서 import 형태로 사용할 경우 npm 설치가 필요하다.
하지만 일반적인 웹사이트(PHP, HTML 기반)에서는 사용하지 않아도 된다.

즉, 단순 아이콘 사용 목적이라면 npm 설치 없이도 충분히 활용 가능하며,

개발 환경에 따라 선택적으로 사용하는 구조이다.

■ 활용 포인트

브랜드 아이콘 빠른 적용 가능

SVG 기반으로 고해상도 대응

색상 및 크기 자유롭게 커스터마이징 가능

CDN / 직접삽입 / npm 방식 모두 지원

■ 추천 사용 환경

홈페이지 제작 (기업/쇼핑몰/솔루션 사이트)

관리자 페이지 UI

SNS/브랜드 아이콘 표시 영역

디자인 시안 및 프로토타입 작업

간단하게 사용하려면 사이트에 접속해서 아이콘 선택 후 HTML 을 이용해도 된다.

[해피CGI][cgimall] Elastic hover effect (Chrome only) 탄력적인 마우스 오버 효과

해피CGI윤실장 — Tue, 19 May 2026 09:23:12 +0900

마우스 호버를 하면 탄력적이게 휘어집니다.
마우스 아웃하면 탄력적으로 원래 모양으로 돌아갑니다.

이 소스는 메뉴 텍스트 각 글자가 hover 시 탄성 있게 위로 휘어지는 효과를 만든 CSS입니다.

핵심은 일반적인 transform 애니메이션이 아니라 아래 내용을 확인하세요.

@property 로 커스텀 속성 애니메이션 가능하게 만듬

offset + shape() 로 글자마다 곡선 경로 위에 배치

sibling-index(), sibling-count() 로 글자 위치별로 다르게 계산

hover 시 --_s 값을 0 → 1로 바꿔서 곡률을 키움

전체 소스는 해당 사이트 또는 첨부 파일을 다운로드 받아서 확인이 가능합니다.

[해피CGI][cgimall] Pill Toggle - cpc-true-false 커스텀 토글 버튼

해피CGI윤실장 — Fri, 15 May 2026 09:10:27 +0900

클릭시 애니메이션 효과가 있습니다.

핵심내용은 아래와 같습니다.

.option 컴포넌트 전체 스타일

내부에 fieldset, legend, 라디오 영역을 배치

:before 가짜 요소를 이용해서 선택된 버튼 뒤에 움직이는 배경판을 만듬

:has([value="no"]:checked) 조건으로 "no"가 체크되면 배경판이 오른쪽으로 이동

라디오 input은 실제로는 투명하게 덮어두고, 보이는 건 레이블/박스 스타일

[해피CGI][cgimall] 3D 이미지 큐브 갤러리 인터랙션 효과

해피CGI윤실장 — Thu, 14 May 2026 09:05:25 +0900

여러 개의 이미지를 3D 큐브 형태로 배치하여 마우스 움직임에 따라 입체적으로 반응하는
이미지 갤러리 효과를 구현한 예제입니다.
사용자가 마우스를 움직이면 이미지가 자연스럽게 이동하거나 강조되어 보여지며,
일반적인 이미지 목록보다 더 생동감 있는 화면 구성을 만들 수 있습니다.

포트폴리오 페이지, 작품 갤러리, 상품 소개 페이지 등에서
시각적으로 흥미로운 콘텐츠 표현을 위해 활용할 수 있는 인터랙션 효과입니다.

HTML 구조

</div>

{

"imports": {

"three": "https://unpkg.com/three@0.160.0/build/three.module.js",

"three/addons/": "https://unpkg.com/three@0.160.0/examples/jsm/"

}

</script>

CSS 소스

body { margin: 0; overflow: hidden; background-color: #000; }

canvas { display: block; }

/* Lightbox styles */

#lightbox {

display: none; /* Hidden by default */

position: fixed;

z-index: 1000;

top: 0;

left: 0;

width: 100%;

height: 100%;

background-color: rgba(0, 0, 0, 0.9);

justify-content: center;

align-items: center;

opacity: 0;

transition: opacity 0.3s ease;

}

#lightbox.active {

display: flex; /* Use flex to center content */

opacity: 1;

}

#lightbox img {

max-width: 90%;

max-height: 90%;

}

#close-btn {

position: absolute;

top: 20px;

right: 40px;

color: #fff;

font-size: 30px;

cursor: pointer;

font-family: sans-serif;

user-select: none;

}

JS 소스

import * as THREE from 'three';

import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

// === 1. SCENE SETUP ===

const scene = new THREE.Scene();

scene.background = new THREE.Color(0x000000);

const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 2000);

camera.position.set(0, 100, 120);

const renderer = new THREE.WebGLRenderer({ antialias: true });

renderer.setSize(window.innerWidth, window.innerHeight);

renderer.setPixelRatio(window.devicePixelRatio); // For high DPI screens

document.body.appendChild(renderer.domElement);

const controls = new OrbitControls(camera, renderer.domElement);

controls.enableDamping = true; // Inertia

controls.dampingFactor = 0.05;

controls.minDistance = 50;

controls.maxDistance = 500;

controls.maxPolarAngle = Math.PI / 2; // Prevent camera from going under the grid

// Lighting

const ambientLight = new THREE.AmbientLight(0xffffff, 1.0);

scene.add(ambientLight);

const dirLight = new THREE.DirectionalLight(0xffffff, 1.5);

dirLight.position.set(20, 80, 50);

scene.add(dirLight);

// === 2. CUBE GENERATION ===

const cols = 12;

const rows = 8;

const cubeSize = 10;

const gap = 0.5;

const step = cubeSize + gap;

// Calculate grid dimensions to center it

const gridWidth = cols * step - gap;

const gridDepth = rows * step - gap;

const startX = -gridWidth / 2 + cubeSize / 2;

const startZ = -gridDepth / 2 + cubeSize / 2;

const cubes = [];

const textureLoader = new THREE.TextureLoader();

const sideMaterial = new THREE.MeshLambertMaterial({ color: 0x222222 }); // Dark grey sides

const geometry = new THREE.BoxGeometry(cubeSize, cubeSize, cubeSize);

for (let i = 0; i < cols; i++) {

for (let j = 0; j < rows; j++) {

// Use 'seed' to get the same image for thumbnail and full size

const seed = `img_${i}_${j}`;

const thumbUrl = `https://picsum.photos/seed/${seed}/200/200`; // Low res for texture

const fullUrl = `https://picsum.photos/seed/${seed}/1200/800`; // High res for lightbox

const texture = textureLoader.load(thumbUrl);

texture.anisotropy = renderer.capabilities.getMaxAnisotropy();

const topMaterial = new THREE.MeshLambertMaterial({ map: texture });

// Material array: [Right, Left, Top, Bottom, Front, Back]

const materials = [

sideMaterial, sideMaterial,

topMaterial, // Top face has the image

sideMaterial, sideMaterial, sideMaterial

];

const cube = new THREE.Mesh(geometry, materials);

// Positioning

cube.position.x = startX + i * step;

cube.position.z = startZ + j * step;

cube.position.y = 0;

// Store custom data for animation and lightbox

cube.userData = {

targetY: 0,

fullUrl: fullUrl

};

scene.add(cube);

cubes.push(cube);

}

// === 3. RAYCASTING SETUP ===

const raycaster = new THREE.Raycaster();

const mouse = new THREE.Vector2(9999, 9999); // Start off-screen

let hoveredCube = null;

function onMouseMove(event) {

// Normalize mouse coordinates (-1 to +1)

mouse.x = (event.clientX / window.innerWidth) * 2 - 1;

mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

}

window.addEventListener('mousemove', onMouseMove, false);

// === 4. CLICK HANDLERS & LIGHTBOX ===

const mouseDownPos = new THREE.Vector2();

// Track mouse down position

window.addEventListener('mousedown', (event) => {

mouseDownPos.x = event.clientX;

mouseDownPos.y = event.clientY;

});

const lightbox = document.getElementById('lightbox');

const lightboxImg = document.getElementById('lightbox-img');

const closeBtn = document.getElementById('close-btn');

function openLightbox(url) {

lightboxImg.src = url;

lightbox.style.display = 'flex';

requestAnimationFrame(() => lightbox.classList.add('active'));

}

function closeLightbox() {

lightbox.classList.remove('active');

setTimeout(() => {

lightbox.style.display = 'none';

lightboxImg.src = "";

}, 300); // Wait for transition

}

window.addEventListener('click', (event) => {

// Calculate distance between mousedown and mouseup

const dx = event.clientX - mouseDownPos.x;

const dy = event.clientY - mouseDownPos.y;

const distance = Math.sqrt(dx * dx + dy * dy);

// If moved less than 5px, treat as a click. Otherwise, it's a drag (camera control).

if (distance < 5 && hoveredCube) {

openLightbox(hoveredCube.userData.fullUrl);

}

});

// Close on background click or close button

lightbox.addEventListener('click', (e) => {

if (e.target !== lightboxImg) closeLightbox();

});

closeBtn.addEventListener('click', closeLightbox);

// === 5. ANIMATION LOOP ===

function animate() {

requestAnimationFrame(animate);

controls.update();

// LOGIC: Check intersection with actual cubes

raycaster.setFromCamera(mouse, camera);

const intersects = raycaster.intersectObjects(cubes);

if (intersects.length > 0) {

// Get the first (closest) cube

hoveredCube = intersects[0].object;

} else {

hoveredCube = null;

}

// Update cursor style

if (hoveredCube) {

document.body.style.cursor = 'pointer';

} else {

document.body.style.cursor = 'default';

}

// Animate cubes

cubes.forEach(cube => {

if (cube === hoveredCube) {

// Lift height set to 5

cube.userData.targetY = 5;

} else {

cube.userData.targetY = 0;

}

// Smooth interpolation (Lerp)

cube.position.y += (cube.userData.targetY - cube.position.y) * 0.15;

});

renderer.render(scene, camera);

}

// Handle window resize

window.addEventListener('resize', () => {

camera.aspect = window.innerWidth / window.innerHeight;

camera.updateProjectionMatrix();

renderer.setSize(window.innerWidth, window.innerHeight);

});

animate();

[해피CGI][cgimall] CSS만으로 구현한 인터랙티브 3D 카드 효과

해피CGI윤실장 — Wed, 13 May 2026 09:04:30 +0900

마우스 움직임에 따라 카드가 자연스럽게 기울어지며
입체적으로 반응하는 3D 인터랙션 효과를 CSS로 구현한 예제입니다.

transform, perspective, hover 속성을 활용하여
별도의 JavaScript 없이도 카드가 실제로 움직이는 듯한 동적인 UI 효과를 표현할 수 있습니다.

카드형 레이아웃, 서비스 소개 영역, 상품 리스트 등 다양한 UI 디자인에 적용하기 좋으며,
간단한 코드만으로도 세련된 인터랙션을 구현할 수 있는 효과적인 예제입니다.

HTML 구조

- const DATA = [

- '1540968221243-29f5d70540bf',

- '1596135187959-562c650d98bc',

- '1628944682084-831f35256163',

- '1590013330451-3946e83e0392',

- '1590421959604-741d0eec0a2e',

- '1572613000712-eadc57acbecd',

- '1570097192570-4b49a6736f9f',

- '1620789550663-2b10e0080354',

- '1617775623669-20bff4ffaa5c',

- '1548600916-dc8492f8e845',

- '1573824969595-a76d4365a2e6',

- '1633936929709-59991b5fdd72'

- ];

- const N = DATA.length;

.scene

.a3d(style=`--n: ${N}`)

- for(let i = 0; i < N; i++)

img.card(src=`https://images.unsplash.com/photo-${DATA[i]}?w=280`

style=`--i: ${i}` alt='jellyfish')

//- generates this kind of HTML:

//- <div class="scene">

//- <div class="a3d" style="--n: 12">

//- <img class="card" src="image0.jpg" style="--i: 0" alt="image description"/>

//- <img class="card" src="image1.jpg" style="--i: 1" alt="image description"/>

//-

//- </div>

CSS 소스

/* ====== Relevant CSS ====== */

.scene, .a3d { display: grid }

.scene {

/* prevent scrollbars */

overflow: hidden;

/* for 3D look; smaller = more extreme effect */

perspective: 35em;

mask: /* lateral fade */

linear-gradient(90deg,

#0000, red 20% 80%, #0000)

}

.a3d {

place-self: center /* middle align */;

/* don't flatten 3D transformed children

* of this parent having its own 3D transform */

transform-style: preserve-3d;

animation: ry 32s linear infinite

}

/* simplest y axis rotation */

@keyframes ry { to { rotate: y 1turn } }

.card {

/* base card width, you may change this */

--w: 17.5em;

/* compute base angle corresponding to a card */

--ba: 1turn/var(--n); /* in the future: sibling-count() */

grid-area: 1/ 1 /* stack in same one grid cell */;

width: var(--w);

aspect-ratio: 7/ 10;

object-fit: cover;

border-radius: 1.5em;

/* don't want to see back of cards in front of screen plane */

backface-visibility: hidden;

/* need to use a transform chain here, cannot use separate

* rotate & translate properties because they'd be applied

* in wrong order (translate, then rotate) for what we need */

transform:

/* rotate around y axis; in the future: sibling-index() */

rotatey(calc(var(--i)*var(--ba)))

/* only after that translate along z axis with minus */

translatez(calc(-1*(.5*var(--w) + .5em)/tan(.5*var(--ba))))

}

@media (prefers-reduced-motion: reduce) {

.a3d { animation-duration: 128s }

}

/* ====== General page prettifying and layout ====== */

html, body { display: grid }

html { height: 100% }

body { background: #fff3ed }

[해피CGI][cgimall] FilePond – 드래그앤드롭을 지원하는 JavaScript 파일 업로드 라이브러

해피CGI윤실장 — Tue, 12 May 2026 09:07:59 +0900

FilePond는 웹 애플리케이션에서 파일 업로드 기능을 쉽고 세련되게 구현할 수 있도록 도와주는 JavaScript 라이브러리입니다.
기본 HTML 파일 입력 요소를 확장하여 드래그앤드롭 업로드, 이미지 미리보기, 업로드 진행 상태 표시 등 다양한 사용자 친화적인 기능을 제공합니다.

https://pqina.nl/filepond/

최신버전의 소스는 https://github.com/pqina/filepond/tree/v5 에서 다운로드 가능 합니다.

사용자는 파일을 업로드 영역에 드래그하여 추가하거나, 파일 선택 창을 통해 업로드할 수 있으며, 업로드되는 파일의 상태를 실시간으로 확인할 수 있습니다. 또한 이미지 업로드 시 썸네일 미리보기를 제공하여 사용자 경험을 크게 향상시킵니다.

FilePond은 비동기 업로드(AJAX)를 지원하여 파일을 서버로 개별 전송할 수 있으며, 대용량 파일을 안정적으로 업로드할 수 있도록 Chunk Upload(분할 업로드) 기능도 제공합니다. 이를 통해 사용자는 파일 업로드 중에도 다른 작업을 계속 진행할 수 있습니다.

또한 다양한 플러그인을 통해 이미지 리사이즈, 이미지 편집, 파일 형식 검증 등 추가 기능을 확장할 수 있으며 React, Vue, Angular, Svelte 등 다양한 프레임워크와도 함께 사용할 수 있습니다.

주요 특징

- 드래그앤드롭 기반 파일 업로드 UI

- 이미지 미리보기 및 업로드 진행 상태 표시

- 비동기(AJAX) 파일 업로드 지원

- 대용량 파일을 위한 Chunk Upload 지원

- 이미지 리사이즈, 검증 등 다양한 플러그인 확장

- React, Vue, Angular 등 다양한 프레임워크 지원

FilePond을 사용하면 기본적인 파일 업로드 입력창을 보다 직관적이고 편리한 인터페이스로 개선할 수 있으며,
관리자 페이지나 사용자 파일 업로드 기능을 구현할 때 매우 유용하게 활용할 수 있습니다.

[해피CGI][cgimall] Flatpickr - 가볍고 강력한 날짜, 시간 선택 라이브러리

해피CGI윤실장 — Mon, 11 May 2026 10:21:47 +0900

Flatpickr은 웹사이트에서 날짜와 시간을 선택할 수 있도록 도와주는 JavaScript 기반의 DateTime Picker 라이브러리입니다.
별도의 프레임워크나 라이브러리에 의존하지 않는 구조로 제작되어 가볍고 빠르게 동작하며,
다양한 옵션과 테마를 제공하여 다양한 웹 환경에서 유연하게 사용할 수 있습니다.

https://flatpickr.js.org/
사이트에서 최신버전의 소스 다운로드 및 데모페이지와 사용방법을 확인 가능 합니다.

입력 필드에 간단한 설정만 적용하면 캘린더 UI가 자동으로 생성되며, 사용자는 클릭만으로 날짜와 시간을 편리하게 선택할 수 있습니다.
날짜 선택뿐 아니라 시간 선택, 날짜 범위 선택, 여러 날짜 선택 등의 다양한 기능을 지원합니다.

또한 최소 날짜, 최대 날짜 설정, 특정 날짜 비활성화, 날짜 형식 지정 등 다양한 설정 옵션을 제공하여
예약 시스템, 일정 관리, 신청폼 등 다양한 웹 서비스에 활용할 수 있습니다.

Flatpickr은 React, Vue, Angular 등 다양한 프레임워크와 함께 사용할 수 있으며,
다국어 지원과 여러 테마를 제공해 웹사이트 디자인에 맞게 쉽게 커스터마이징할 수 있습니다.

다양한 샘플은 아래 페이지를 통해 확인 해보시면 됩니다.
https://flatpickr.js.org/examples/

주요 특징

- 경량 JavaScript 라이브러리 (의존성 없음)

- 날짜 선택 / 시간 선택 / 날짜 범위 선택 지원

- 다양한 옵션 및 이벤트 API 제공

- 다국어 지원 및 다양한 테마 제공

- React, Vue, Angular 등 다양한 프레임워크와 호환

웹 폼의 날짜 입력 UI를 간편하게 구현하고 싶다면 Flatpickr은 매우 효율적인 선택이 될 수 있습니다.

[해피CGI][cgimall] Infinite Gallery Hall

해피CGI윤실장 — Fri, 8 May 2026 10:27:26 +0900

가로로 스크롤 해서 볼 수 있는 갤러리 입니다.

미술관 디자인으로 다양한 작품을 볼 수 있습니다.
자세한 내용은 데모를 참고해주시기 바랍니다.

HTML

<div class="logo">GALLERIE D'ART</div>

<span class="catalogue-number">01 / Collection</span>

<h1>Ethereal <br>Form</h1>

Captured in the gentle light of early morning, this piece explores the boundaries between reality and abstraction. The soft textures invite the viewer to look closer, revealing layers of complexity hidden within the simplicity.

</div>

<span class="meta-label">Artist</span> <span class="meta-value">Elena Varas</span>

<span class="meta-label">Medium</span> <span class="meta-value">Oil on Linen</span>

</div>

<span class="catalogue-number">02 / Collection</span>

<h1>Geometric <br>Silence</h1>

A study in precision and balance. By stripping away organic chaos, the artist reveals the quiet mathematical purity that underlies nature. The composition demands a moment of stillness from its observer.

</div>

<span class="meta-label">Artist</span> <span class="meta-value">Marcus Thorne</span>

<span class="meta-label">Medium</span> <span class="meta-value">Acrylic & Graphite</span>

</div>

<span class="catalogue-number">03 / Collection</span>

<h1>Fading <br>Horizons</h1>

The horizon line serves as a metaphor for the future—always visible yet forever out of reach. The bleeding colors suggest the fluidity of memory and the inevitable passage of time.

</div>

<span class="meta-label">Artist</span> <span class="meta-value">Isabella Rossi</span>

<span class="meta-label">Medium</span> <span class="meta-value">Watercolor Wash</span>

</div>

<span class="catalogue-number">04 / Collection</span>

A minimalist approach challenging the viewer to find meaning in emptiness. The texture of the canvas itself becomes the primary subject, inviting a purely tactile visual experience without distraction.

</div>

<span class="meta-label">Artist</span> <span class="meta-value">Unknown</span>

<span class="meta-label">Medium</span> <span class="meta-value">Mixed Media</span>

</div>

CSS

body, html {

margin: 0;

padding: 0;

width: 100%;

height: 100%;

overflow: hidden;

background-color: #f7f7f5;

font-family: 'Lato', sans-serif;

color: #111;

}

#canvas-container {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

z-index: 1;

}

#ui-layer {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

z-index: 2;

pointer-events: none;

}

.logo {

position: fixed;

top: 40px;

left: 50px;

font-family: 'Playfair Display', serif;

font-weight: 700;

letter-spacing: 2px;

font-size: 1rem;

text-transform: uppercase;

z-index: 10;

}

.slide-content {

position: absolute;

top: 25%;

left: 8%;

width: 30%;

max-width: 450px;

opacity: 0;

transform: translateY(20px);

transition: opacity 0.8s ease, transform 0.8s ease-out;

pointer-events: auto;

}

.slide-content.active {

opacity: 1;

transform: translateY(0);

}

h1 {

font-family: 'Playfair Display', serif;

font-weight: 400;

font-style: italic;

font-size: 4rem;

margin: 0 0 1.5rem 0;

line-height: 1;

color: #0d0d0d;

}

.catalogue-number {

font-size: 0.7rem;

text-transform: uppercase;

letter-spacing: 3px;

color: #999;

margin-bottom: 1.5rem;

display: inline-block;

border-bottom: 1px solid #ddd;

padding-bottom: 5px;

}

.description {

font-size: 1.05rem;

font-weight: 300;

line-height: 1.8;

color: #444;

margin-bottom: 3rem;

text-align: justify;

}

.meta-grid {

display: grid;

grid-template-columns: 80px 1fr;

row-gap: 0.8rem;

border-top: 1px solid #e0e0e0;

padding-top: 1.5rem;

}

.meta-label {

font-size: 0.65rem;

text-transform: uppercase;

letter-spacing: 1.5px;

color: #888;

align-self: center;

}

.meta-value {

font-family: 'Playfair Display', serif;

font-size: 1.1rem;

font-style: italic;

color: #222;

}

.scroll-hint {

position: fixed;

bottom: 40px;

left: 50px;

font-size: 0.7rem;

text-transform: uppercase;

letter-spacing: 2px;

color: #aaa;

}