Joystick

Prompt

Create a beautiful, elegant, highly polished neumorphic analog joystick entirely from scratch. Use HTML, CSS, and vanilla JavaScript only. Do not use React, Vue, Canvas, WebGL, external UI frameworks, animation libraries, or other dependencies. Produce one complete, self-contained HTML file that can be opened directly in a modern browser. The finished joystick should have an exceptionally refined light-gray neumorphic appearance with subtle gradients, soft recessed surfaces, delicate highlights, understated shadows, and convincing but restrained three-dimensional depth. The overall visual character should feel premium, minimalist, tactile, soft, elegant, and carefully rendered. Avoid a flashy, colorful, glossy, heavily beveled, or game-controller-like appearance. Use a very light gray page background with a subtle radial gradient. A suitable visual range is approximately #f2f2f2 in the brighter area transitioning gradually toward approximately #d9d9d9 in the darker area. Keep the contrast gentle and avoid visible gradient banding. Center the joystick on the page. Construct the joystick from several concentric circular layers. Create an outer recessed circular area approximately 340 pixels in diameter. Give it a soft light-gray radial gradient and subtle neumorphic depth. Use a faint dark inset shadow toward one side and a gentle light inset highlight toward the opposite side so the surface appears softly recessed into the page. Inside this area, create the main joystick housing approximately 200 pixels in diameter. Give the main housing a slightly different light-gray radial gradient so it reads as a distinct physical surface. Use subtle outer shadows, faint inset shadows, and soft highlights. Avoid visible borders or hard edges. Inside the main housing, create a circular socket approximately 140 pixels in diameter. It should appear somewhat deeper and more recessed than the surrounding housing. Build the socket depth from several layered inset shadows rather than one strong shadow. Combine broad, low-opacity shading with smaller and slightly darker inner shading so it has a soft spherical or bowl-like appearance. Place the movable joystick knob at the center. Make the knob approximately 100 pixels in diameter and perfectly circular. It should appear softly raised above the socket. Give the knob a subtle light-gray radial gradient with the lighting biased slightly toward one side. Its centered appearance should combine several carefully balanced lighting effects: * a soft inner highlight, * a subtle darker inset shadow, * a faint contact shadow, * a broad low-opacity ambient shadow, * and restrained directional shadows. Use rich, multilayered neumorphic depth while keeping the overall effect understated and elegant. Small, extremely subtle reflected highlight details may be added to the knob if they improve the impression of a carefully rendered physical object. These details should be barely visible and should never resemble decorative dots or obvious texture. Around the joystick, position six minimalist outline icons at equal 60-degree intervals. Place the icons approximately 135 pixels from the center of the joystick. Use these six functions: Home Search Star More Refresh Back Draw the icons using clean inline SVG line artwork. Use a quiet medium-light gray around #a0a0a0 for their normal appearance. When the joystick moves toward one of the six icon directions, gently emphasize the nearest icon by making it darker and increasing its size very slightly. Keep this transition smooth, tasteful, and understated. Use a restrained monochromatic light-gray palette throughout the interface. Avoid colorful accents or colorful UI styling. The joystick must move freely and continuously through 360 degrees. The joystick must respond only to deliberate press-and-drag interaction. The user must press the primary mouse button directly on the movable joystick knob and continue holding the button while dragging. Pointer movement without pressing the knob must have no effect on the joystick. Movement should begin immediately when the knob is pressed. While the primary mouse button remains held, dragging should control the joystick continuously. When the button is released, the joystick should smoothly move back to its exact centered resting position. Use Pointer Events so the same interaction also works correctly with a mouse, pen, and touchscreen. Use pointer capture during an active drag. Once dragging begins, movement must continue correctly if the pointer moves outside the knob, outside the joystick housing, or outside the immediate joystick area. The drag should end only when the active pointer is released or cancelled. Give the joystick a generous circular movement range. The movable knob should have significantly more travel than the small central socket would normally suggest. For a main joystick housing approximately 200 pixels in diameter, allow the center of the knob to travel approximately 75 to 85 pixels away from the joystick's center before reaching maximum displacement. This generous range is intentional. The knob should be able to move noticeably across the surrounding joystick structure. Ordinary mouse movements should usually remain within the available analog travel instead of quickly reaching the maximum displacement. The control should feel spacious and expressive rather than constantly constrained. Use a circular maximum-distance limit. When the requested pointer position remains inside the maximum movement radius, allow normal unconstrained 360-degree movement. When the requested pointer position exceeds the maximum radius, calculate the current angle from the joystick center and limit only the radial distance. The knob should then move smoothly around the circular outer limit while continuing to follow changes in pointer angle. Use true radial distance for this calculation. The movement boundary must remain circular in every direction. Avoid independent horizontal and vertical clamping. The transition into the maximum movement radius should feel natural and visually smooth rather than like the knob has abruptly collided with an invisible wall. The motion quality is extremely important. The joystick should feel exceptionally smooth, fluid, soft, slightly floaty, and premium while simultaneously feeling extremely responsive. Capture pointer input immediately. Maintain a target position derived directly from the current pointer position and a separate rendered joystick position. Update the rendered position using requestAnimationFrame. Apply only a small amount of carefully tuned interpolation, damping, or spring-like smoothing between the target position and the rendered position. Input itself should not be delayed or heavily filtered. The small amount of smoothing should affect only the visual movement of the knob. The result should feel as though the knob has a tiny amount of physical mass and inertia while remaining tightly connected to the user's hand. There should be virtually no perceptible input latency. The knob should react immediately when grabbed. It should never visibly spend time trying to catch up with the cursor. Fast changes of direction should be followed almost instantly. Small movements should remain precise. Slow circular motion should look exceptionally smooth. Rapid movement should remain fluid without visible stepping between pointer events. The slightly floaty quality should come from subtle interpolation and visual inertia rather than sluggishness. Do not use a long CSS transition to perform active dragging. Use requestAnimationFrame for the live motion loop. A carefully tuned interpolation system, critically damped spring, or similarly appropriate motion model may be used. Tune the system strongly toward responsiveness and use only enough damping or smoothing to remove harsh mechanical movement. When the knob is released, animate it smoothly back to the exact center. The return motion should feel soft, elegant, quick, and slightly spring-like. It should begin moving toward center immediately after release and decelerate naturally as it approaches the resting position. A tiny amount of physically believable inertia is acceptable. Avoid noticeable bouncing, repeated oscillation, rubber-band movement, exaggerated overshoot, or wobbling. When the remaining displacement becomes visually negligible, set the final X and Y position to exactly zero so the knob cannot remain fractionally off-center due to floating-point calculations. The knob should also have a subtle three-dimensional tilt that changes continuously according to its current displacement. Use restrained rotateX and rotateY transformations derived from the normalized X and Y joystick position. Vertical movement should influence tilt along one axis. Horizontal movement should influence tilt along the other axis. Diagonal movement should naturally combine both. Keep the maximum tilt subtle. The effect should contribute to the tactile impression of a physical joystick without making the knob appear dramatically angled or distorted. Make the knob's lighting and shadows react continuously to its movement. Use the current X and Y displacement to subtly change the direction and intensity of: * inset highlights, * inset shadows, * the contact shadow, * ambient shadowing, * and directional cast shadows. The lighting response should create the impression that the knob is physically shifting and tilting above a recessed circular socket. Movement in one direction should create appropriately subtle changes in highlights and shadows on the corresponding and opposing sides. Calculate these visual effects continuously from the actual normalized joystick displacement. Avoid a small set of fixed lighting states or visibly discrete directional steps. The knob position, 3D tilt, lighting, shadows, and icon emphasis should all transition continuously through the full 360-degree range. Determine icon emphasis from the joystick's current angle. Find which of the six 60-degree icon directions is nearest to the joystick's current direction and gently emphasize that icon. Reduce or eliminate directional icon emphasis when the knob is very close to the exact center, since there is no meaningful direction in that state. During the return-to-center animation, continuously bring the knob's position, tilt, lighting, shadows, and icon emphasis back toward their neutral centered values. Once centered, all visual properties should settle into exact stable neutral values. The user must be able to grab the knob again immediately while it is moving back toward center. A new press during the return animation should instantly interrupt the automatic return and begin a new drag from the knob's current visible position. There should be no position jump, animation conflict, or temporary loss of responsiveness. Handle rapid clicking and dragging reliably. Handle very fast changes in pointer direction reliably. Handle releasing the pointer outside the joystick correctly. Handle pointer cancellation correctly. Handle dragging far outside the joystick correctly while pointer capture is active. Handle interruption of the return-to-center animation correctly. Prevent text selection during joystick interaction. Prevent native browser element dragging. Prevent accidental link activation. Prevent touch scrolling or browser gestures while the joystick is actively being manipulated. The surrounding icons should not intercept pointer interaction intended for the joystick. Use a clean and robust interaction state model for centered, pressed, dragging, and returning states. The final result should feel like an exceptionally polished physical analog control rendered as an elegant minimalist desktop interface. Two characteristics are equally important: The movement should feel soft, smooth, and slightly floaty. The input should feel extremely responsive and immediate. Achieve both by responding to pointer input instantly while applying only a very small amount of smoothing to the rendered physical movement. Prioritize the implementation in this order: 1. Beautiful and elegant light-gray neumorphic appearance. 2. Extremely responsive click-and-drag input. 3. Smooth, fluid, slightly floaty analog movement. 4. Generous circular movement range that rarely feels constrained. 5. Natural continuous three-dimensional tilt. 6. Directionally responsive subtle lighting and shadows. 7. Smooth, elegant, and quick return-to-center behavior. 8. Stable interaction during rapid or unusual pointer movement. 9. Clean and maintainable vanilla JavaScript. Use approximately these major dimensions as the starting proportions: Outer recessed circle: 340 pixels diameter. Main joystick housing: 200 pixels diameter. Inner recessed socket: 140 pixels diameter. Movable knob: 100 pixels diameter. Icon radius from center: 135 pixels. Maximum knob-center travel radius: approximately 75 to 85 pixels. These dimensions may be implemented with CSS variables so the component remains internally consistent and can be resized later without rewriting the interaction mathematics. Use subtle radial gradients rather than flat gray fills. Use several low-opacity shadow layers rather than one heavy shadow. Use soft lighting transitions rather than hard edges. Use a restrained monochromatic gray palette. Use continuous analog calculations for movement and visual effects. Use real circular distance calculations for the movement boundary. Use requestAnimationFrame for live movement and return animation. Use Pointer Events and pointer capture for robust interaction. Keep the code organized and readable. Do not include pseudocode. Do not merely explain how to build the joystick. Write the complete working implementation. Output one complete self-contained HTML file containing all required HTML, CSS, SVG, and vanilla JavaScript.

A system prompt was added to support web rendering