Surrealism 超现实主义(Surrealism)
Surrealism treats the interface as a dream canvas: recognizable objects are placed in impossible relationships — clocks melt and drape over edges, eyes float in soft gradients, solids breathe with slow morphing motion. The palette is hushed and lunar rather than neon, the lighting is diffuse and uncanny, and the composition follows the logic of the subconscious rather than the grid. It borrows its name from the 1924 art movement, but as a UI style it is a contemporary mood: the screen as a lucid dream.
超现实主义把界面当作梦境画布:可辨识的物件被放进不可能的关系里——时钟融化并垂挂在边缘,眼睛漂浮在柔渐变中,实体随着缓慢的形变动画呼吸。配色是低沉而月光的,而非霓虹;光线弥漫而诡异,构图遵循潜意识逻辑,而不是网格。名字借自 1924 年的艺术运动,但作为 UI 风格它是一种当代情绪:屏幕即清醒梦。
Scope: This entry covers the visual language of dream logic, melting forms, floating symbolic objects, and soft uncanny gradients in interface design. It is not the same as the historical Surrealist art movement, nor is it vaporwave's 80s/90s consumer nostalgia, cyberpunk's neon dystopia, or the occult strand of maximalist digital collage.
范围:本条覆盖界面设计中的梦境逻辑、融化形态、漂浮象征物与柔和诡异渐变这一视觉语言。它不是历史上的超现实主义艺术运动,也不是 Vaporwave 的 80/90 年代消费怀旧、Cyberpunk 的霓虹反乌托邦,或神秘主义取向的极繁数字拼贴。
标本可交互 —— 点点看。Specimen is live — try it.
If you called it…如果你管它叫……
Full style DNA完整风格 DNA
-
Melting and flowing forms融化与流动的形态 geometry defining定义特征
Edges drip, sag, and re-solidify like soft wax or Dalí's clocks; border-radius becomes an organic 40%/60%/70% blob, and rigid rectangles look out of place.
边缘像软蜡一样滴落、下垂并重新凝固;border-radius 变成有机的 40%/60%/70% 液滴,生硬的矩形会显得格格不入。
-
Gravity-defying floating objects反重力的漂浮物件 layout defining定义特征
Eyes, clocks, clouds, keys, or body parts hover at different depths with no logical support, casting soft diffuse shadows rather than resting on surfaces.
眼睛、时钟、云朵、钥匙或肢体在不同深度悬空,没有逻辑支撑,投下柔和的漫射阴影,而不是落在平面上。
-
Soft lunar gradients柔和的月光渐变 color defining定义特征
Backgrounds wash from lavender #c8b6e2 through peach #f4c7b0 to pale blue #a8d5e5, desaturated and glowing, never the loud neon of vaporwave or cyberpunk.
背景从薰衣草紫 #c8b6e2 流过蜜桃 #f4c7b0 到淡蓝 #a8d5e5,低饱和并带光晕,绝不是 Vaporwave 或 Cyberpunk 那种 loud 霓虹。
-
Dream collage and impossible combinations梦境拼贴与不可能组合 imagery defining定义特征
A clock drapes over a cloud, an eye peers from inside a button, a fish swims through the sky — the imagery is symbolic and deliberately irrational.
时钟垂挂在云朵上,眼睛从按钮里窥视,鱼在天空中游泳——意象是象征性的、刻意非理性的。
-
Subconscious symbols潜意识符号 imagery supporting辅助特征
Eyes, keys, doors, mirrors, moons, and disembodied hands recur as motifs; they read as dream symbols rather than functional icons.
眼睛、钥匙、门、镜子、月亮、断手反复出现作为母题;它们读起来像梦境符号,而不是功能图标。
-
Diffuse uncanny lighting弥漫的诡异光照 surface supporting辅助特征
Shadows are long, soft, and often cast in the wrong direction; specular highlights feel like moonlight or candlelight rather than a single coherent sun.
阴影长而柔和,方向往往不一致;镜面高光像月光或烛光,而不是单一、连贯的太阳。
-
Slow liquid morphing缓慢的液态形变 motion supporting辅助特征
Animations breathe, drift, and melt over 6–12 seconds with easing that feels viscous; nothing snaps or clicks like a machine.
动画在 6–12 秒内呼吸、漂浮、融化,缓动带有黏稠感;没有任何东西像机器一样咔哒作响。
-
VHS glitch and 80s consumer debrisVHS 故障与 80 年代消费碎片 surface avoid避免
Scanlines, chromatic aberration, katakana, Windows chrome, and mall-palm sunsets are the vocabulary of vaporwave; they break the fine-art dream spell here.
扫描线、色差、日文片假名、Windows 窗口边框、商场棕榈日落都是 Vaporwave 的词汇;出现在这里会破坏美术梦境的氛围。
Often confused with: Vaporwave最容易混淆:蒸汽波(Vaporwave)
Surrealism超现实主义(Surrealism)
Vaporwave蒸汽波(Vaporwave)
This is Surrealism because the space follows fine-art dream logic: melting clocks, floating eyes, soft diffused gradients, and impossible object combinations on a muted lunar palette. There is no Greek bust, no Windows 95 chrome, no VHS scanline, no katakana, and no 80s mall nostalgia.
这是超现实主义,因为空间遵循美术梦境逻辑:融化的时钟、漂浮的眼睛、柔和的漫射渐变,以及低饱和月光调色板上的不可能物件组合。这里没有希腊雕像、没有 Windows 95 窗口边框、没有 VHS 扫描线、没有片假名,也没有 80 年代商场怀旧。
It would become vaporwave if the palette shifted to pink-to-cyan #ff71ce/#01cdfe sunsets, the objects were replaced by marble busts and palm trees, and VHS scanlines and chromatic aberration were layered over the whole scene.
如果调色板变成粉到青 #ff71ce/#01cdfe 的日落,物件被替换成大理石雕像和棕榈树,并且整片画面叠上 VHS 扫描线和色差,就变成 Vaporwave 了。
In code — optional starting points代码写法 —— 可选起点
Soft lunar gradient background
background: linear-gradient(160deg, #c8b6e2 0%, #f4c7b0 45%, #a8d5e5 100%);
Melting organic blob shape
border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; box-shadow: 0 18px 40px rgba(45, 36, 56, .25);
Floating slow-breathe animation
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } animation: float 7s ease-in-out infinite;
Style brief — paste into your agent风格 Brief —— 粘贴给你的代理
Create the interface in the spirit of Surrealism. Canvas: a soft lunar gradient background running lavender #c8b6e2 through peach #f4c7b0 to pale blue #a8d5e5, optionally with a faint parchment texture. Defining signals: geometry melts — use organic border-radius like 40% 60% 70% 30% / 40% 50% 60% 50% for cards and buttons so edges feel like warm wax; objects float at impossible depths with soft diffuse shadows (box-shadow: 0 18px 40px rgba(45,36,56,.25)) rather than resting on shelves; imagery is dream-collage — clocks draping over edges, disembodied eyes, clouds, keys, moons — rendered as flat symbolic shapes or inline SVG. Color: keep it desaturated and glowing — add misty creams #f5f0e6, muted gold #d4af37, and deep shadow #2d2438; avoid neon pink/cyan and chrome. Typography: choose an elegant high-contrast serif (or a refined sans with generous letter-spacing) for titles; body text stays small and unobtrusive so the dream imagery dominates. Motion: slow liquid morphing and floating — 6–12s ease-in-out loops, viscous transitions, nothing mechanical; use @keyframes for gentle up/down drift and subtle scale breathing. Interactions: buttons should feel like pressing soft wax — small scale(.96) with a shadow collapse rather than a hard click. Do not drift into vaporwave: the decisive difference is the absence of 80s/90s consumer nostalgia, Greek busts, katakana, Windows chrome, VHS scanlines, and neon grids. Preserve readability by placing text on solid misty panels (#f5f0e6 at 92% opacity) over the gradient, keep text at 4.5:1 against those panels, and honor prefers-reduced-motion by disabling drift and morph loops.
用超现实主义(Surrealism)精神创建这个界面。画布:柔和的月光渐变背景,从薰衣草紫 #c8b6e2 流过蜜桃 #f4c7b0 到淡蓝 #a8d5e5,可选叠加 faint 的羊皮纸纹理。决定性信号:几何形态要融化——卡片和按钮使用有机 border-radius,如 40% 60% 70% 30% / 40% 50% 60% 50%,让边缘像温热的蜡;物件在不可能的深度漂浮,用柔和的漫射阴影(box-shadow: 0 18px 40px rgba(45,36,56,.25))而不是落在架子上;意象是梦境拼贴——垂挂在边缘的时钟、脱离躯干的眼睛、云朵、钥匙、月亮——用扁平象征图形或内联 SVG 呈现。配色保持低饱和并带光晕:加入雾 Cream #f5f0e6、哑光金 #d4af37 和深影 #2d2438;避开霓虹粉青和镀铬。字体:标题用优雅的高对比衬线(或字母间距宽松的精致无衬线);正文保持小巧、不抢眼,让梦境意象主导。动效:缓慢的液态形变与漂浮——6–12s ease-in-out 循环,黏稠过渡,不带机械感;用 @keyframes 做轻柔上下漂移和 subtle 缩放呼吸。交互:按钮要像按压软蜡——小幅度 scale(.96) 配阴影塌陷,而不是硬邦邦的点击。不要滑向 Vaporwave:决定性区别在于没有 80/90 年代消费怀旧、希腊雕像、片假名、Windows 窗口边框、VHS 扫描线和霓虹网格。可读性:把文字放在不透明的雾 Cream 面板(#f5f0e6 92% 不透明度以上)上,确保面板上的文字对比度 4.5:1,并响应 prefers-reduced-motion,禁用漂移与形变循环。
Accessibility & misuse可访问性与误用
The soft gradient background and symbolic imagery are central to the mood but hostile to text legibility: place all body text and controls on solid or near-solid misty panels (#f5f0e6 at 92% opacity or higher) and verify 4.5:1 against them, not against the gradient.
柔和的渐变背景与象征性意象是氛围核心,但对文字可读性很不友好:所有正文和控件都要放在纯色或近不透明的雾 Cream 面板(#f5f0e6 不透明度 92% 以上)上,并在面板而非渐变上验证 4.5:1 对比度。
Slow drift and morph animations are load-bearing for the dreamlike atmosphere, but they can trigger vestibular issues; respect prefers-reduced-motion by removing continuous floating, scaling, and morphing, and keep any remaining motion subtle and non-repeating.
缓慢的漂移与形变动画是营造梦境感的关键,但可能诱发前庭不适;响应 prefers-reduced-motion,移除持续的漂浮、缩放与形变,并把剩余动画降到 subtle 且非循环。
Symbolic eyes, keys, and floating objects are decorative in this UI vocabulary; ensure functional controls have clear labels, focus indicators distinct from the dream imagery, and never rely on surreal juxtapositions alone to convey state or action.
象征性的眼睛、钥匙和漂浮物件在本 UI 词汇里是装饰性的;务必保证功能性控件有清晰标签、与梦境意象区分开的焦点指示器,永远不要只靠超现实拼贴来传达状态或操作。
Origin起源
Surrealism began as an art movement in 1924 when poet André Breton published the Surrealist Manifesto in Paris, channeling Sigmund Freud's ideas about the unconscious and dreams; Salvador Dalí's 1931 painting The Persistence of Memory, with its melting clocks, and René Magritte's visual paradoxes became its most recognizable images. As a UI aesthetic it is a 21st-century digital mood rather than a formal school — contemporary portfolios and editorial sites borrow the dream-logic collage, soft gradients, and floating symbolic objects to evoke introspection and the uncanny.
超现实主义作为艺术运动始于 1924 年,诗人 André Breton 在巴黎发表《超现实主义宣言》,借用了 Sigmund Freud 关于潜意识与梦境的思想;Salvador Dalí 1931 年的画作《记忆的永恒》(融化的时钟)和 René Magritte 的视觉悖论成为它最知名的图像。作为 UI 美学,它是 21 世纪的数字情绪而非正式流派——当代作品集与编辑网站借用梦境逻辑拼贴、柔渐变和漂浮象征物来唤起内省与诡异感。