{"id":18936943,"url":"https://github.com/qc20/shaders-triangles","last_synced_at":"2026-03-21T08:30:17.005Z","repository":{"id":249574157,"uuid":"831883509","full_name":"QC20/Shaders-Triangles","owner":"QC20","description":"This project showcases an interactive, color-shifting 3D cube using pure CSS. It demonstrates advanced CSS techniques including 3D transforms, custom properties, and animations.","archived":false,"fork":false,"pushed_at":"2024-07-21T22:41:48.000Z","size":3816,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-12-31T21:28:26.990Z","etag":null,"topics":["creative-coding","css","css-3d-animation","css-art","css-gradients","css-only","design-patters","front-end-experiment","generative-design","html","interactive-design","responsive-design","shaders","ui-components","ux-design","visual-effects","web-animation","web-graphics","web-interactivity"],"latest_commit_sha":null,"homepage":"https://qc20.github.io/Shaders-Triangles/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/QC20.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-07-21T22:26:21.000Z","updated_at":"2024-07-21T22:41:51.000Z","dependencies_parsed_at":"2024-07-21T23:51:47.523Z","dependency_job_id":null,"html_url":"https://github.com/QC20/Shaders-Triangles","commit_stats":null,"previous_names":["qc20/shaders-triangles"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/QC20%2FShaders-Triangles","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/QC20%2FShaders-Triangles/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/QC20%2FShaders-Triangles/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/QC20%2FShaders-Triangles/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/QC20","download_url":"https://codeload.github.com/QC20/Shaders-Triangles/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239937697,"owners_count":19721483,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["creative-coding","css","css-3d-animation","css-art","css-gradients","css-only","design-patters","front-end-experiment","generative-design","html","interactive-design","responsive-design","shaders","ui-components","ux-design","visual-effects","web-animation","web-graphics","web-interactivity"],"created_at":"2024-11-08T12:09:22.726Z","updated_at":"2026-03-21T08:30:15.220Z","avatar_url":"https://github.com/QC20.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Shaders \u0026 Triangles: Interactive 3D Color-Shifting Cube\n\nThis project showcases an interactive, color-shifting 3D cube using pure CSS. It demonstrates advanced CSS techniques including 3D transforms, custom properties, and animations.\n\n## Features\n\n- Seamless color transition using CSS custom properties\n- 3D rotation animation\n- Interactive hover effects\n- Responsive design using viewport units\n\n## Design Implications\n\nThis project exemplifies how complex, interactive 3D visualizations can be created using only CSS. It pushes the boundaries of what's possible in web design without relying on JavaScript or WebGL.\n\nKey design aspects:\n\n1. **Color Theory**: The use of HSL color space allows for smooth, natural color transitions.\n2. **3D in 2D**: Demonstrates techniques for creating the illusion of 3D objects on a 2D screen.\n3. **Interaction Design**: The hover effect provides immediate visual feedback, enhancing user engagement.\n\n## Customization\n\nThe design is highly customizable. Here are some elements you can easily modify:\n\n- Change the `--clr` variable in the `.cont` class to alter the base color.\n- Adjust the `width` and `aspect-ratio` of the `.box` class to change the cube's size and shape.\n- Modify the `animation-duration` in the `.cont` and `.box` classes to change the speed of color transition and rotation.\n\n## Experimentation Ideas\n\n1. Try changing the gradient patterns to create different textures on the cube faces.\n2. Experiment with different `transform` values to create unique 3D shapes.\n3. Add more interactive elements, such as click events or scroll-based animations.\n4. Incorporate this design into a larger UI component, like a loading indicator or navigation menu.\n\nI encourage you to fork this project and push the boundaries of CSS-based 3D design!","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqc20%2Fshaders-triangles","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fqc20%2Fshaders-triangles","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqc20%2Fshaders-triangles/lists"}