类型：Site模板 · 收录：2026-10-08 21:01:30 · 源码：会员可见
Build one standalone HTML file that matches the Octopus Mentality homepage. All CSS goes in one style block. All JavaScript goes in one script at the end of body. Load Instrument Serif 400 and Manrope variable 200–800 from Google Fonts. Use only the CloudFront URLs below. There is no video.
The page has ONE octopus. At rest the visitor sees a single glossy octopus, centered, on a flat blue field. A second photograph must never sit beside it, behind it, or on top of it. The white octopus file is a hidden paint source. It appears only inside the moving cursor trail, in the same square as the glossy octopus, with feathered edges. If both octopus files are visible at the same time, the page is wrong.
ASSETS — use each URL once, for the role named here
Hero floral relief, full-bleed background only, object-fit cover, never tiled, never used as the octopus:
https://d2ol7oe51mr4n9.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/d1872ca5-da87-42b3-ab3a-8a383e3d9d4e.png
The only visible octopus photograph. One img. No CSS background. No second copy:
https://d2ol7oe51mr4n9.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/f7a99a85-2883-4296-89f3-ea5ab7efcae6.png
White octopus paint source. Never an img. Drawn only into the reveal canvas, then clipped by the cursor mask:
https://d2ol7oe51mr4n9.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/7792c3f6-2962-481c-b92f-fcb33e95e54f.png
Logo, 64px:
https://d2ol7oe51mr4n9.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/e0ba8586-80cf-4cfa-a76a-66a1e790982c.svg
Clay floral relief, second screen only:
https://d2ol7oe51mr4n9.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/fb824cff-1293-496d-9c50-ef8dd60b3608.jpg
Meadow cow:
https://d2ol7oe51mr4n9.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/4b89cfc0-33b5-4609-9193-c4f91dc26ac5.jpg
Forest deer:
https://d2ol7oe51mr4n9.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/8af6b1a5-c680-4c82-bbf7-8ffdfc0ef719.png
Set crossorigin anonymous on every image a canvas reads. The CDN allows it.
COLORS AND TYPE
--hero-bg #0010a2, --accent #ffbf48, clay #f72526, text white. Body Manrope. Display titles and editorial intros Instrument Serif. Theme color #0010A2. Title: Octopus Mentality — Creative Branding Studio. box-sizing border-box. Body margin 0, overflow-x hidden, antialiased. Desktop scale --s = min(viewportWidth/1920, viewportHeight/1080), written on the hero by JavaScript.
DOCUMENT
body#top > main.viewport > section.hero#hero then section.clay-scene#clay.
Hero children, in this order:
1. canvas#hero-relief-canvas.relief-canvas.hero-relief
2. svg#hero-relief.relief-reveal.hero-relief, viewBox 0 0 1920 1080, preserveAspectRatio none. It contains a mask and one image of the floral relief at x0 y0 width 1920 height 1080, preserveAspectRatio xMidYMid slice. The mask path starts empty, so this SVG shows nothing until the WebGL fallback needs it.
3. svg.guides with three lines and one circle, plus three erase lines. Secondary guides start hidden.
4. h1.display-title.title-octopus#hero-title, text OCTOPUS, aria-label "Octopus Mentality"
5. p.display-title.title-mentality, text MENTALITY, aria-hidden
6. div.octopus containing exactly three layers, all position absolute, inset 0, width 100%, height 100%:
- img of the glossy octopus, draggable false, alt "Glossy octopus with blue floral ornament"
- canvas#octopus-reveal-canvas, display none until WebGL is ready
- svg#white-reveal viewBox 0 0 922 922, hidden whenever the canvas is showing. Its image is the white octopus, fully masked, so it is invisible at rest.
7. header.topbar with brand home link and the Menu button
8. the eyebrows, studio copy, vision block, footer note, and right-bottom sentence
9. nav#menu-panel hidden
Clay: a sticky .clay-stage with canvas#clay-canvas and a masked SVG of the clay JPEG, then .editorial-content overlapping it.
OCTOPUS STACK — this is the part that must not double
.octopus is one box: position absolute, left 50%, top 50%, width and height calc(922px * var(--s)), z-index 4, pointer-events none, will-change transform and opacity.
Transform is translate(-50%, -50%) translate3d(var(--parallax-x, 0px), var(--parallax-y, 0px), 0).
The glossy img fills that one box. The reveal canvas fills that same box and starts display:none. The white SVG fills that same box and stays invisible because its mask path is empty. WebGL then draws the white octopus into the canvas and punches it with destination-in, so the white form exists only where the trail is. Hide the SVG when the canvas is displayed. Never give the white file its own layout box. Never use background-image, background-repeat, or a second octopus element.
HERO PLACEMENT, multiplied by --s unless noted
Sticky hero, 100vh, overflow hidden, isolation isolate, user-select none, background #0010a2.
OCTOPUS: left calc(50% - 896px * var(--s)), top 16.6667%, 160px, line-height 1, letter-spacing -0.007em, color #ffbf48, nowrap, z-index 3, pointer-events none.
MENTALITY: left calc(50% + 22px * var(--s)), top 74.6296%, same size, letter-spacing 0.
Logo: 64px, top and left 64px. Menu button: top and right 64px, height 59px, padding 0 19px, gap 11px, 1px white border, radius 50px, transparent, Manrope 16px. Two 17px hairlines. Hover or open: white fill, blue text, 0.2s ease. Focus ring 2px #ffbf48, offset 5px.
Menu panel: top 134px, right 64px, width 220px, padding 12px, radius 18px, border 1px rgba(255,255,255,.6), background rgba(0,16,162,.94), blur 12px, shadow 0 16px 45px rgba(0,0,55,.15). Links Home #top, Our approach #clay, The studio #studio-title. Hover inverts to white. Open label is Close. Escape or a link closes it.
Copy is Manrope 16px, line-height 1.34, z-index 5, text-shadow 0 1px 2px rgba(0,16,162,.95), 0 0 5px rgba(0,16,162,.7). Color transition 0.12s ease. When the brush touches a block, add class brush-touched: color #ffbf48 and text-shadow none.
Top right, top 12.5%, left calc(50% + 386px * var(--s)), width 160px, right aligned: Shape the Future / Before It Arrives.
Left middle, top 34.7222%, left calc(50% - 896px * var(--s)), width 162px, right aligned: Build the Vision / Before It Launches.
Studio block, top 38.9815%, left calc(50% + 580px * var(--s)), width 249px. Heading 20px weight 500 line-height 1.18: Shape the Future Before / It Arrives. Two justified paragraphs at 72% white: “We help ambitious founders turn bold ideas into unforgettable identities with strategic thinking and creative precision.” and “We are a creative branding studio for ambitious startups, turning bold ideas into unforgettable identities with strategic thinking and creative precision.”
Lower left, top 67.5926%, left calc(50% - 896px * var(--s)), width 250px, justified 72% white: “We build bold, high-performance brands that move fast, adapt faster, and leave a lasting mark on their audience.” Under it a white pill, blue text, weight 600, 14px, min-height 48px, margin-top 20px, padding 0 24px, radius 999px, href #clay, label Explore the Art. Hover: background #ffbf48, translateY(-2px), 0.2s ease.
Footer note, top 94.2593%, left calc(50% - 648px * var(--s)): Build the Vision.
Lower right, top 90.7407%, left calc(50% + 532px * var(--s)), width 361px: the same audience sentence.
Guides: white stroke rgba(255,255,255,.58), 1px, non-scaling. Only the diagonal from bottom-left to top-right is visible. Vertical, horizontal, and circle guides are display none, but their erase strokes still run. Erase stroke is #0010a2, 4px, round caps.
SMOOTH CURSOR — do not use :hover, a hard circle, a CSS mask that jumps to the pointer, or an image swap
Two motions run together on pointermove, mouse only. Touch, scrollY greater than 2, the logo, and the menu do not drive them. Both use requestAnimationFrame and exponential smoothing, so 60Hz and 120Hz feel the same.
Motion A, the whole octopus drifts. Target X is ((pointerX / heroWidth) * 2 - 1) * 28 * --s. Target Y is ((pointerY / heroHeight) * 2 - 1) * 20 * --s. Each frame: follow = 1 - exp(-(now - lastTime) / 180), then position += (target - position) * follow. Write the result to --parallax-x and --parallax-y in px. On pointerleave or blur, the target returns to 0 with the same ease. Once scrollY > 2, freeze the current offset. Do not move the octopus upward while it fades. Opacity is 1 until scroll, then 1 - smoothstep(scrollY / heroHeight, 0, 0.32). On viewports 900px and below, opacity stays 1 and parallax stays 0.
Motion B, the relief trail. One follower, not a stored polyline of raw mouse points. Each frame dt is seconds. follow = 1 - exp(-dt / 0.045). follower += (pointer - follower) * follow. Paint a soft capsule from the previous follower position to the new one while the pointer is down and idle is under 90ms. Radius is 270 * --s. The edge is smoothstep from 0.28 to 1.0 of that radius, with a small sine wave of 0.13 so the edge is organic. The mask is stored in a low-resolution WebGL ping-pong buffer, about 40% of the width and at most 640px wide, using two 8-bit channels so subpixel decay does not leave residue. Each step the ink diffuses slightly, then ink = max(0, ink * exp(-dt * 1.25) - dt * 0.10). Old paint fades even while the pointer paints somewhere else. The trail is gone after 2600ms of no input, including the fade to zero. Reset on blur, hidden tab, and when the stage leaves the viewport.
The hero canvas clears to rgb(0, 16, 162) and mixes in the floral relief by smoothstep(0.025, 0.78, ink). Cover-fit the relief. During the rise only, shift the sample by depth 0.075 times emergence, where emergence = 4 * amount * (1 - amount), along a shared lift of (-0.015, 0.045) plus a tiny shading normal. Fully revealed pixels sit back on the original image. If the user prefers reduced motion, motion is 0: no lift, no flow, follower snaps.
The same ink field clips the white octopus. After drawing the field, render that field as white alpha into the hero canvas at the small map size. On the octopus canvas: clear, draw the white PNG scaled to the canvas, set globalCompositeOperation to destination-in, then draw only the crop of the alpha field that sits under the octopus box, including the current parallax offset. Set composite back to source-over. Show the canvas and hide the white SVG. The glossy img remains underneath, untouched. One octopus, two surfaces, same square.
A separate 31-point chain, head follow 70ms and tail follow 38ms, radius 250 * --s / 2, only recolors text. It holds 80ms and fades over 370ms with smoothstep. It does not paint the picture.
WebGL context: alpha true, premultipliedAlpha false, antialias false, dither off. Flip Y only when uploading the floral texture. If WebGL fails, fall back to an SVG stroke about 340 * --s wide with a Gaussian blur of 52 * --s, samples kept 1.8s, and hide the canvas.
Scroll erases the guides with smoothstep. Progress is scrollY / heroHeight, clamped, and is 0 for reduced motion and for widths at or below 900px. Vertical erase runs from 9% to 48% of progress, horizontal from 24% to 63%, diagonal from 4% to 69%, circle dash from 16% to 82%. At the top, call the hero renderer reset so the trail does not remain while the hero is sticky underneath the next screen. The hero renderer is enabled only while scrollY is 2 or less.
SECOND SCREEN
#clay, z-index 9, top radius 28px, background #f72526, shadow 0 -24px 70px rgba(0,5,65,.22). .clay-stage is sticky, 100vh, same red, pointer-events none, radius inherited. Its renderer uses the same trail, base color rgb(247, 37, 38), depth 0.075, and listens on #clay so the trail continues while text covers the stage. No octopus on this screen.
.editorial-content overlaps with margin-top -100vh, padding-top clamp(72px, 7vw, 150px), visibility hidden until fonts load and lines are measured, then add is-ready.
12 columns, gap clamp(8px, 0.66667vw, 18px), same inline padding.
Copy, in order:
● OUR APPROACH
Every memorable brand begins with a different point of view. We bring strategy, identity, digital experiences and art direction together to turn ambitious ideas into a world that feels unmistakably yours.
A1 — Brand strategy¹ finds the idea at the heart of your business. A clear direction, a distinct voice and a reason for people to care.
A2 — Visual identity² gives that idea a form. Expressive typography, unexpected details and a visual language that belongs to you.
Centered index: A1 Strategy (01) B1 Digital (03) / A2 Identity (02) B2 Art direction (04)
B1 — Digital experiences³ make the brand move. Intuitive, expressive and alive, every interaction becomes another part of the story.
B2 — Art direction⁴ opens up a new world. Familiar things take an unexpected shape, creating images that stay with you long after the first look.
Cow photo, columns 7–11, aspect 484/645, radius 4px, cover. Caption columns 11–12: ● WILD BY DESIGN / MEADOW STUDY (01). Alt: A white cow with blue floral markings standing in a sunlit meadow. The row id is meadow-study and starts 13vw below the approach.
● OCTOPUS MENTALITY
We are an independent creative studio for people with bold ideas. Our work brings clear thinking and a curious eye together, moving between strategy, design and imagination. We look for the unexpected detail that makes a brand feel alive — a distinctive shape, a surprising image, a voice you recognize. From the first conversation to the final experience, we build identities with character, purpose and room to grow.
Deer, columns 1–5, aspect 487/754, id forest-study. Alt: A white deer with blue floral markings in a misty birch forest. Details start 17vw below the studio intro. Studio section has a 1px top border at 32% white.
Notes, columns 5–7, 78% white: 1 A familiar presence, seen differently. The meadow study explores identity through an unexpected detail. Link Meadow study ↗ to #meadow-study. 2 The same visual language in a new world. An idea can change its surroundings and still feel like itself. Link Forest study ↗ to #forest-study.
Essays, columns 9–12. A: It starts with a point of view. reference 1. Before we draw a mark or choose a color, we get to know the people behind the idea. What do they believe? What should their brand make someone feel? Those conversations give us a direction worth following. We turn that direction into a story, then explore the shapes, words and images that can carry it. The strongest identity grows from something real — a point of view that is clear enough to guide every decision and distinctive enough to be remembered.
B: A world that holds together. reference 2. A brand lives in more than one place. It moves from a screen to a package, from a first impression to an everyday experience. We create systems that connect those moments without making them all look the same. Working closely with founders and teams, we make room for expression, growth and the unexpected. Each element has its own character, and every part belongs to the same world. That is how a good idea becomes a lasting presence.
Footer, 10vw below, top border: ©2026 Octopus Mentality in columns 1–4. Independent minds. / Unmistakable identities. in columns 7–9. Back to top ↑ right-aligned to #top.
Type sizes: section marks clamp(12px, 1.13333vw, 24px) weight 600. Intros Instrument Serif clamp(40px, 4.05vw, 88px)/1.02, letter-spacing -0.012em, first-line indent about 41.67%. Studio intro indent 50%. Display lines Manrope 500 clamp(26px, 3.33333vw, 68px)/1.06, letter-spacing -0.055em. A1 and B1 start at column 6. A2 and B2 start at column 7. Numbers sit in column 5. Index is Instrument Serif clamp(34px, 3.9vw, 80px), centered, with large vertical margins. Photos scale 1.07 and shift vertically by up to 8% of their height from viewport center, eased through rAF.
After fonts load, split each [data-reveal] element into its real wrapped lines. Keep one screen-reader copy. Each line is overflow hidden and starts translated down 100%. It rises in 0.9s with cubic-bezier(.16, 1, .3, 1), stagger 0.065s. Reveal once at root margin 0 0 -10% 0. Rebuild lines only when width changes, after 120ms. Reduced motion shows the lines immediately and sets photo shift to 0.
MOBILE, max-width 900px
Hero is position relative, height auto, min-height 100svh, a single-column grid, padding max(22px, safe-area-top) 20px 44px, row gap 24px. Header is row 1, height 44px. OCTOPUS is row 2 at clamp(76px, 24vw, 190px). The same single octopus box is row 3, width min(112vw, 620px), aspect-ratio 1, margin-top and margin-bottom -12vw, transform translateX(-50%) only. MENTALITY is row 4, right aligned, clamp(62px, 19.8vw, 155px). Studio copy is row 5, max-width 520px, 15px, left aligned, and the second paragraph is display none. Vision block is row 6. Hide the corner captions and Build the Vision note. Menu panel spans left 20px and right 20px, links min-height 48px. Clay radius 22px. Stage height 100lvh and overlap -100lvh. Editorial becomes 4 columns, 16px padding. Intros clamp(32px, 8.2vw, 60px) with 18% indent. Display copy clamp(22px, 5.5vw, 36px). Photos, notes, and essays go full width. Notes become two columns. Footer stacks. Buttons stay at least 44px. The octopus is still one glossy image plus the hidden trail canvas. Do not add a second octopus for mobile.
Reduced motion removes parallax, guide draw, relief displacement, line motion, and photo shift. Do not add sections, libraries, stock art, or another copy of either octopus file.