Skip to the content
FilCommunityWorkflowsSkillsDocsOpen Fil
Day and night toggle: one chunky 3D toggle switch built in Three.js, centred on the screen like a premium UI component. The…
A web page: run it in Fil

Code · Claude Opus 5.5

Day and night toggle

Day and night toggle: one chunky 3D toggle switch built in Three.js, centred on the screen like a premium UI component. The track is a rounded capsule of frosted glass with a thin bright rim. Inside it, a small glowing sun sits on the left. Clicking or tapping the switch rolls the knob to the right with a springy, satisfying ease (about 0.8 s), and the sun turns into a crescent moon as it rolls. At the same time the scene shifts from day to night: a soft blue sky gradient with a few slow, puffy low-poly clouds drifting inside the track becomes deep navy with small twinkling stars, and the clouds fade out. Clicking again goes back to day. The lighting follows: a warm key light by day, cool moonlight with a soft glow at night. The page background behind the switch changes colour with it. Feel: the switch tilts a few degrees toward the pointer on hover, presses down slightly on click, and sits on a soft contact shadow. Materials: a glossy knob, frosted transmissive glass for the track, an emissive sun and moon. Keep it minimal. No text except a tiny uppercase label under the switch that reads DAY or NIGHT. Fit any screen size, render crisp on retina (pixel ratio up to 2), toggle with Space or Enter for keyboard users, and respect prefers-reduced-motion.

Samnang Aing@samaing19830628

Model
Claude Opus 5.5
Made by
Samnang Aing
Shared
Likes
0
Open in Fil

Use its prompt, turn it into a video or a 3D model, or find more like it in Fil. Fil is invite-only for now: without an invitation, Open in Fil shows the waitlist.

More like this

An editorial spot illustration of a long-limbed designer sitting cross-legged on a chair at a laptop, one hand resting on…An editorial spot illustration of a long-limbed designer sitting cross-legged on a chair at a laptop, one hand resting on their chin and…YouTube thumbnail, 16:9. The man in the second reference photo, keeping his face, hair and skin tone exactly, on the right…YouTube thumbnail, 16:9. The man in the second reference photo, keeping his face, hair and skin tone exactly, on the right, chest-up…An editorial spot illustration of a long-limbed designer sitting cross-legged on a chair at a laptop, one hand resting on…An editorial spot illustration of a long-limbed designer sitting cross-legged on a chair at a laptop, one hand resting on their chin and…An editorial spot illustration of a long-limbed designer sitting cross-legged on a chair at a laptop, one hand resting on…An editorial spot illustration of a long-limbed designer sitting cross-legged on a chair at a laptop, one hand resting on their chin and…An editorial spot illustration of a long-limbed designer sitting cross-legged on a chair at a laptop, one hand resting on…An editorial spot illustration of a long-limbed designer sitting cross-legged on a chair at a laptop, one hand resting on their chin and…This is the costume key art for the Frost Cantor, the Sorceress, one of the four callings a player can choose at the…This is the costume key art for the Frost Cantor, the Sorceress, one of the four callings a player can choose at the pilgrims' fire in…YouTube thumbnail, 16:9. Bold title text "BUILD PAID APPS" on the left in three lines, in a heavy condensed sans-serif with…YouTube thumbnail, 16:9. Bold title text "BUILD PAID APPS" on the left in three lines, in a heavy condensed sans-serif with a thick dark…YouTube thumbnail, 16:9. The man in reference image 1, keeping his face, hair and skin tone exactly, on the right…YouTube thumbnail, 16:9. The man in reference image 1, keeping his face, hair and skin tone exactly, on the right, chest-up, black…YouTube thumbnail, 16:9. The man in the second reference photo, keeping his face, hair and skin tone exactly, on the right…YouTube thumbnail, 16:9. The man in the second reference photo, keeping his face, hair and skin tone exactly, on the right, chest-up…YouTube thumbnail, 16:9. The man in the second reference photo, keeping his face, hair and skin tone exactly, on the right…YouTube thumbnail, 16:9. The man in the second reference photo, keeping his face, hair and skin tone exactly, on the right, chest-up…This is the costume key art for Edda, a main character of Thornwake, a dark-fantasy action RPG about an old forest that…This is the costume key art for Edda, a main character of Thornwake, a dark-fantasy action RPG about an old forest that swallowed a fallen…YouTube thumbnail, 16:9. The man in the second reference photo, keeping his face, hair and skin tone exactly, on the right…YouTube thumbnail, 16:9. The man in the second reference photo, keeping his face, hair and skin tone exactly, on the right, chest-up…