photo-live/docs/designs/embed-widget-scroll-hearts-2026-09-22.md

嵌入组件：自动向上滚动与点赞气泡

日期：2026-09-22。内置 image_gen 生成的静态概念图，不是运行中的动画或已实现页面。

最新设计要求

• PC、移动端统一195×280 CSS px，右下悬浮，不按PC屏幕百分比放大。画板两视口缩放不同，实际尺寸按CSS验收。
• 移除标题栏、底部数量、暂停、切图按钮和View入口。仅保留照片右上轻量收起入口。
• 单列照片带自动连续向上滚动，上方逐渐移出，下方新图进入，不是横向切换或淡入淡出轮播。
• 图片宽度填满窗口，高度优先按原比例；窗口裁出滚动中片段，不把每张照片固定裁成窗口比例。照片间距约3–4px。
• 右侧覆盖珊瑚粉色半透明心形气泡，轻量上浮，不挡脸、不拦截照片点击。
• 点击某张照片打开对应观众单图深链；不需要底部跳转按钮。
• 宿主网站、照片、尺寸箭头及画板底部英文说明只作设计示意，不属于组件实际内容。

实现时需保留的约束

收起、页面不可见暂停动画和取数；减少动态效果时停止自动滚动并提供手动滚动。键盘焦点/悬停暂停便于点击，避免照片移动造成点击错图。少量照片不重复创建无限DOM，可用有限窗口循环并在边界无缝衔接；单图时静态展示，无图显示精简空态。

点赞气泡应使用真实相册点赞事件并限制粒子数量，不能随机制造他人点赞。当前嵌入模块是否已接入实时事件须实现前核对；事件对应不在视口的照片时不得误暗示当前图被赞，可在下一次对应图可见时展示尚新鲜事件或直接丢弃视觉展示，不改真实计数。缩略图签名、隐藏/删除、换绑及停用需沿用既有权限和版本机制。以上为交互建议，不代表已实现。

完整生成提示词

Use case: ui-mockup. Create a high fidelity design comparison board for a TINY FIXED-SIZE AUTO VERTICALLY SCROLLING event photo window embedded on desktop AND mobile corporate websites. This is NOT a slideshow carousel. Both widgets same CSS size 195px wide x280px high on desktop and mobile. No sizing relative to desktop. Landscape clean opaque pale grey board, two front-on website viewports: desktop1100x760 logical left, mobile390x844 logical right, near same scale. Heading "LIVE MOMENTS, FLOWING UP". Subtitle "Auto-scroll photo window · 195 × 280 px". Labels DESKTOP / MOBILE.
Host website NORTHLINE, architectural trade exhibition photography hero, heading "Meet us at the fair", blue Explore exhibits button, quiet feature content below. Widget floats bottom right of each viewport at fixed small size. Most host content remains clear.
CRITICAL WIDGET DESIGN: a rounded12 rectangular PHOTOS-ONLY WINDOW, edge-to-edge photographs, no card header, no footer, NO photo counts, NO pause button, NO arrows, NO dots, NO view link, NO title, NO toolbar. Only a tiny subtle translucent minus/collapse affordance top right over the photo. Photo content scrolls AUTOMATICALLY UPWARD like a continuous vertical filmstrip: inside each 195x280 viewport show bottom portion of preceding exhibition photo at the TOP (~45px), one main natural photograph of diverse adult business visitors networking at trade booth in the MIDDLE (~155px), top portion of next photo of speaker/stage entering at the BOTTOM (~75px), separated by slim4px pale gutters. Horizontal photo edges make the vertical stacking explicit. NOT horizontal slides. Two to three image fragments visible at once. Realistic photography no distortion. Add subtle soft fade only at very top/bottom edges to suggest clipped moving stream.
Over the RIGHT SIDE of photos, independent translucent coral/pink HEART BUBBLES gently rising, 4-6 varied size12-20px, soft opacity, no black bubbles, no text counts, no avatars, no likes toolbar. Bubbles do not obscure faces. Both desktop and mobile have exactly matching window style and same logical size.
Outside the website frames, a discreet small upward motion annotation with arrow and label "Photos move upward automatically" near lower margin, and a small note "Tap a photo to open the gallery". These labels are on design board only, not widget UI. A small195×280px dimension label may be outside each card. Make actual widget visually photos-only; no whitespace below images. Corporate host website is background context only. English text clean and crisp. Professional restrained white/blue websites with tiny photorealistic photo windows and coral hearts. No mobile native navigation, login, upload or dashboard. No physical devices, perspective, ornamental objects, transparency noise. Full crisp opaque board. Show the static mid-scroll state clearly; do not falsely depict animation as video.