אינטראקציות לאתר: המילים שצריך להגיד לקלוד כדי שהאתר לא ייראה כמו סלופ

Review this page and list every element that is a generic AI-website cliché: gradient text, purple-to-pink buttons, three identical feature cards, floating 3D blobs, chrome headlines, glassmorphism without contrast, stock-photo people, meaningless icons. For each one, propose a specific replacement grounded in this brand's actual material. Do not soften the list.

Tie this animation to scroll position (scroll-scrubbing): scrolling down advances it, scrolling up reverses it exactly. If it is a filmed movement, export the video as about 120 small WebP frames and draw them on a canvas by scroll progress. It should feel like dragging a video scrubber. Do NOT make it a one-shot animation that plays once. Keep native scrolling on phones. With prefers-reduced-motion show one still frame. Check it in a real browser at 390px and desktop and show me.

Bring these words (or cards) in one after another with a stagger of about 0.06s, a small upward move and a slight overshoot, when they enter the screen. For one key paragraph, fill the words from light grey to black as the user scrolls. It should feel like choreography, quick and light. Do NOT use it on every section, and keep Hebrew words whole. With prefers-reduced-motion show everything at once. Check it in a real browser at 390px and desktop and show me.

Add a highlighter behind one key word: a separate element behind the text that animates transform: scaleX from 0 to 1 with transform-origin right (Hebrew RTL), over about 0.6s, and fires only after the headline has finished landing. It should feel like a real marker stroke. Do NOT use a background color on the text, and do NOT mark more than one word. With prefers-reduced-motion show it already drawn. Check it in a real browser at 390px and desktop and show me.

Layer the hero as a sandwich: cut the character image in code into body, head and front leg (same file, so they line up), put the body behind the headline and the head above it, so the last word sits between them. On scroll, rotate the head about 22 degrees around the neck to bite that word and remove it. It should feel physical and a little funny. Do NOT put Hebrew text inside an image. With prefers-reduced-motion show the final frame. Check it in a real browser at 390px and desktop and show me.

Show these items as a large typographic list, one row each. On hover, a thumbnail appears and follows the cursor with lerp (about 0.12), tilting slightly in the direction of movement, and swaps when the row changes. It should feel light and curious. Do NOT turn it into a card grid. Keyboard focus shows the same preview. On phones show the thumbnail inside the row. With prefers-reduced-motion, no tilt or follow. Check it in a real browser at 390px and desktop and show me.

Stack two images with identical framing. A soft circular spotlight (about 180px, feathered) follows the cursor with lerp and reveals the top image through a radial-gradient mask-image, plus -webkit-mask-image for Safari; optionally leave a trail that fades within a second. It should feel like a flashlight finding a hidden layer. Do NOT use a hard-edged circle. On touch, follow the finger. With prefers-reduced-motion show a fixed reveal. Check it in a real browser at 390px and desktop and show me.

Reveal this element with an animated clip-path, from inset(0 0 0 100%) to inset(0) over 0.8s when it enters the viewport, so it wipes in from right to left (Hebrew). It should feel like a clean wipe with a crisp edge. Do NOT fade it at the same time. For a torn-paper effect use polygon() with the same number of points in both states. With prefers-reduced-motion show it immediately. Check it in a real browser at 390px and desktop and show me.

Let visitors drag this wheel with mouse or finger (pointer events). On release, keep it spinning with the release speed, slow it with friction, and let it settle on the nearest scene with a small spring overshoot (GSAP elastic.out(1.2, 0.8)); a short drag springs back. It should feel heavy and playful. Do NOT block vertical page scrolling on phones (touch-action: pan-y). Arrow buttons and keys rotate it too. With prefers-reduced-motion jump between scenes. Check it in a real browser at 390px and desktop and show me.

When the case file drops onto the button, split the headline into letter spans and make each one a Matter.js body synced to the DOM every frame, so they fall, collide and pile on the button; after a few seconds everything flies back. It should feel like a chain reaction. Do NOT create the bodies as static (create them dynamic, then setStatic). Run it only on click. With prefers-reduced-motion skip the physics. Check it in a real browser at 390px and desktop and show me.

Write one full-screen fragment shader in raw WebGL (no three.js) for this effect: <a procedural ocean wave that rises with scroll / rain and fog on a window that the pointer wipes away>. It should feel like real water, never like a looping video. Do NOT add a 3D library or a video file. Pause rendering when it is off screen, and fall back to a still photo if WebGL fails. With prefers-reduced-motion render one still frame. Check it in a real browser at 390px and desktop and show me.

Ask for the microphone only after a tap. Analyse the input with the Web Audio API and detect a breath as low-frequency broadband noise, telling it apart from speech by its sound shape. A breath spreads fog over the window within about one second. It should feel immediate and a little magical. Never record or send audio anywhere. Fallback: press and hold. With prefers-reduced-motion fade the fog in gently. Check it in a real browser at 390px and desktop and show me.

Hide two or three small interactions that are never explained, like a hint after a few idle seconds, a secret double-click or a key combo, and reward each with a small surprise. It should feel like a wink to curious visitors. Do NOT hide navigation or content behind them, and make them reachable by keyboard too. With prefers-reduced-motion keep the reward but drop big motion. Check it in a real browser at 390px and desktop and show me.

Before we go live, audit this site and fix what fails: (1) accessibility per Israeli Standard 5568, Hebrew RTL, a pause button for any motion; (2) privacy: no cookies or trackers without consent; (3) security: no secrets in the front-end, security headers set; (4) mobile at 390px with no horizontal scroll; (5) SEO: title, description, share image, sitemap. For each item give pass or fail with proof. Don't tell me "done". Show me.