[Template: Takram Organic Soft Frame] [Intent] System/architecture concept reveal / warm product narrative / network/memory diagram. Visual distilled from the Takram school of huashu-design (MIT, © alchaincyf).
[Canvas] 1920×1080, beige background #EFEAE0; right side overlaid with a sage green radial wash (rgba(122,158,127,0.10)). Overall soft, natural, with a sense of breathing.
[Fonts] Western Manrope 700/600/400; Chinese Noto Sans SC. Rounded, not too hard.
[Main structure (timeline, default 5s)]
- 0.2s Left frosted-glass rounded card (
rgba(255,253,248,0.66)+ blur 8px + border-radius 40px + soft shadow) rises in from 26px below + scale 0.985. - 0.7s Green eyebrow (
#7A9E7F, uppercase, letter-spacing 4px) fadeUp。 - 0.9s card title (92px, weight 700) fadeUp; one accent word in terracotta orange
#C98A5E。 - 1.2s caption (22px,
#8A867C, line-height 1.8) fadeUp。 - 1.3s Right radial diagram center node (terracotta orange, r=40) pops out (overshoot).
- From 1.4s 8 curved links (sage
#B8C9BA, stroke-dasharray draw) are drawn out from the center in a staggered sequence. - From 1.9s 8 outer nodes (sage green, r=22) pop in a staggered sequence (scale 0→1, overshoot).
- From 2.0s the entire radial diagram enters a 7s slow floating loop (subtle translateY movement).
[Color discipline] Beige #EFEAE0 / warm white card / sage green #7A9E7F·#B8C9BA / terracotta orange #C98A5E / warm gray text.Forbiddenhigh-saturation tech blue/purple. Green is the structural color, orange is the accent color (core node + title accent word).
[Content discipline]
- The node diagram is a "work of art"; the number of nodes is 4-8 adjusted to the content (change the number of nodes/links + angles in the SVG).
- Must use real concepts/relationships, lorem ipsum is strictly forbidden.
- For animation use
@keyframes+ SVG stroke-dashoffset,prefers-reduced-motionall stop at the final state. - Single-file HTML.