Digital Eguide

---
name: digital-eguide
description: Premium "digital e-guide" template family — two patterns sharing a metadata-rich, editorial-archive identity: an infinite 3D-canvas portfolio (case/) for designer 作品集, and a 12-slide horizontal field-notes carousel (social-carousel.html) for long-form knowledge series.
visibility: public
mode: template
carrier: web-page
scenario: portfolio-and-guide
pattern_source: case（无限画布：作品集）/case/index.html, social-carousel.html
source_priority: skill-first
triggers:
  - "做个 e-guide 电子手册"
  - "3D 画布作品集"
  - "field notes 横滚"
  - "知识系列横滚"
  - "高端作品集"
  - "无限画布作品集"
---

# Digital E-Guide Template

Use this template family for **premium, metadata-rich, exploratory digital artifacts** — designer portfolios, archival photo series, knowledge guides — that reward slow browsing instead of fast scrolling.

This template ships two variants. Pick before building.

## Variants

### `case/` — Infinite-canvas portfolio (作品集)

> On-disk path: `case（无限画布：作品集）/case/index.html`

- A Miro-like 3D-cylindrical canvas of 18 tiles you drag, zoom, and click to open case detail pages.
- Use for: designer 作品集, studio portfolio, photographer archive, case-study lobby.
- Distinctive moves: Three.js-style cylindrical projection, drag inertia, gold/dark glass UI, hash-routed detail pages, "Works / About / Resume" nav.
- Companion generator: see top-level `../vr-canvas/` template (modern frontmatter version).

### `social-carousel.html` — 12-frame field-notes carousel

- A 50/50 photo + metadata carousel with 12 horizontal slides, progress bar, slide counter, scaling-on-focus serif title.
- Use for: digital ebook chapter navigation, photography series, "12 lessons from the field"-style guides, museum/archive viewer.
- Distinctive moves: Fraunces italic display that scales on active slide, Inter metadata, film-frame photo marks, 50/50 desktop split that stacks on mobile.

## Use When

- The user wants a **considered, curatorial** browsing experience — not a marketing site, not a social card.
- Every item carries metadata (year, location, technique, brand, tags) and that metadata is part of the design.
- The audience is designers, creators, or curious readers who will spend minutes, not seconds.

## Avoid When

- The artifact is a fast-conversion marketing page (use `saas-landing/`).
- The content has no per-item metadata to display (the template will feel empty).
- The user actually wants a flat blog index, dashboard, or social-card pack.
- Mobile is the dominant channel and rich interaction would degrade — both variants are desktop-leaning.

## Required Reading

Read this `SKILL.md` first. Do **not** read `case/index.html` or `social-carousel.html` by default.

Read the chosen variant only when you need concrete interaction geometry — drag inertia easing, cylinder radius, slide-scale-on-focus curve, breakpoint behavior. Extract patterns; do not lift Three.js code, placeholder project names, or photo URLs wholesale.

## Design Strategy

Pick the variant from the **interaction contract**, not the topic:

- "Let me wander a room of work" → **case/**
- "Walk me through 8–14 numbered entries" → **social-carousel.html**

Then commit to the metadata schema up front (year / category / location / brand …). The template only sings when every entry carries the same set of labels.

## Layout Bias

Prefer:

- one dominant image per entry, full-bleed inside its frame
- metadata in mono / small-caps / Latin to contrast the serif display
- a single warm accent (gold, rust) over a dark or paper ground
- smooth eased motion (cubic-bezier), no bouncy springs
- generous negative space — the artifact's premium feel comes from restraint

Avoid:

- stacking multiple thumbnails per slide / tile (kills the curatorial feel)
- bright neon accents, gradient meshes, sticker decorations
- pop-in animations on every element — choose one motion idiom and hold it
- treating metadata as a footnote — surface it equally with the image