{"id":19491080,"url":"https://github.com/rudeevelops/gradientor-app","last_synced_at":"2025-04-15T14:06:37.947Z","repository":{"id":225190866,"uuid":"765308782","full_name":"RuDeeVelops/gradientor-app","owner":"RuDeeVelops","description":"A minimalist radial background generator. Just move your mouse and be inspired by infinite color possibilities","archived":false,"fork":false,"pushed_at":"2024-03-05T12:44:57.000Z","size":2921,"stargazers_count":55,"open_issues_count":1,"forks_count":3,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-15T14:06:29.766Z","etag":null,"topics":["css","generator","gradient","javascript"],"latest_commit_sha":null,"homepage":"http://gradientor.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/RuDeeVelops.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-02-29T17:11:04.000Z","updated_at":"2024-10-27T22:49:13.000Z","dependencies_parsed_at":"2024-03-05T14:05:06.077Z","dependency_job_id":null,"html_url":"https://github.com/RuDeeVelops/gradientor-app","commit_stats":null,"previous_names":["rudeevelops/gradientor-app"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RuDeeVelops%2Fgradientor-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RuDeeVelops%2Fgradientor-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RuDeeVelops%2Fgradientor-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RuDeeVelops%2Fgradientor-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RuDeeVelops","download_url":"https://codeload.github.com/RuDeeVelops/gradientor-app/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249085437,"owners_count":21210267,"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":["css","generator","gradient","javascript"],"created_at":"2024-11-10T21:15:41.293Z","updated_at":"2025-04-15T14:06:37.928Z","avatar_url":"https://github.com/RuDeeVelops.png","language":"JavaScript","readme":"[![Visitors](https://api.visitorbadge.io/api/visitors?path=https%3A%2F%2Fgithub.com%2FRuDeeVelops%2Fgradientor-app%2F\u0026labelColor=%23000000\u0026countColor=%23d9e3f0)](https://visitorbadge.io/status?path=https%3A%2F%2Fgithub.com%2FRuDeeVelops%2Fgradientor-app%2F)\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\n![X](https://img.shields.io/badge/follow%20@3drudy-%23000000.svg?style=for-the-badge\u0026logo=X\u0026logoColor=white)\n\n# Gradientor.app - A minimalist, beautiful Radial Background Generatorr\n\n### Tech stack: `JS` `css` `html`\n\n### Live link: https://gradientor.app\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"media/gradientorDemo_rodolfoFanti.gif\" alt=\"Gradientor.app by Rodolfo Fanti\" style=\"max-width: 1000px;\"\u003e\n\u003c/p\u003e\n\n\u003ci\u003e\"I know we already have hundreds of gradient generators... what's special about this one then?\u003c/i\u003e\n\n### Main features\n\n- A 100% mouse driven radial background generator.\n- Based on `mousemove` and `mousewheel` events.\n- A color palette logic will always randomize beautiful and infinite gradient combinations.\n- User can visualize the output CSS in a \"terminal-like\" window and copy the output.\n\n## Core Functions\n\n## Color logic: `generateHSLColor`, color palettes and `generateGradientColors`\n\n```javascript\n// Let's create an HSL color generator converting custom parameters to valid CSS HSL syntax\n// We'll be using the custom parameters to generate different color palettes\nfunction generateHSLColor(\n  saturationMin,\n  saturationMax,\n  lightnessMin,\n  lightnessMax,\n  hue = Math.floor(Math.random() * 360) // If hue is undefined, generate a random hue.\n) {\n  const saturation = saturationMin + Math.random() * (saturationMax - saturationMin);\n  const lightness = lightnessMin + Math.random() * (lightnessMax - lightnessMin);\n  return `hsl(${hue}, ${saturation}%, ${lightness}%)`;\n}\n\n// Let's define a few color palettes to generate colors from, using our custom parametres and explicit hue for the monochromatic palette only\nfunction vibrantColor() {\n  return generateHSLColor(70, 100, 40, 60); // saturation between 70% and 100% and lightness between 40% and 60%\n}\nfunction pastelColor() {\n  return generateHSLColor(10, 50, 70, 80); // lower saturation for softer colors and high lightness for pastel effect\n}\nfunction monochromaticColor(hue) {\n  return generateHSLColor(50, 100, 10, 100, hue); // medium to high saturation and lightness but explicit hue\n}\n\n// Create two random colors based on the currentPalette we just defined\n// Every time we call currentPalette(), it will generate a new color based on the currentPalette function\nfunction generateGradientColors() {\n  // If the current palette is monochromatic, generate a random hue BUT USE IT FOR BOTH COLORS\n  if (currentPalette === monochromaticColor) {\n    const hue = Math.floor(Math.random() * 360);\n    currentColor1 = currentPalette(hue);\n    currentColor2 = currentPalette(hue);\n  } else {\n    currentColor1 = currentPalette();\n    currentColor2 = currentPalette();\n  }\n  paintGradient(cursorCircle.offsetLeft, cursorCircle.offsetTop);\n}\n```\n\n## Painting the gradient at mouse position\n\n```javascript\n// Update the gradient based on the current colors and mouse position - also apply that gradient to the currently selected button\nfunction paintGradient(\n  x = window.innerWidth / 2, // if x and y are undefined, use the center of the window.\n  y = window.innerHeight / 2\n) {\n  const xPercent = (x / window.innerWidth) * 100; // Convert position to a percentage of the window width\n  const yPercent = (y / window.innerHeight) * 100;\n  gradientString = `radial-gradient(${gradientSizePx}px circle at ${xPercent.toFixed(2)}% ${yPercent.toFixed(\n    2\n  )}%, ${currentColor1} 0%, ${currentColor2} 100%)`; // Create the gradient CSS syntax string, limit % to 2 decimal places\n  gradientElement.style.background = gradientString; // Apply the gradient background\n\n  if (currentButton) {\n    currentButton.style.background = gradientString; // Apply the gradient background to the current button\n  }\n\n  updateCssOutput(xPercent, yPercent); // Update the CSS output in the custom terminal and pass it the current mouse position\n}\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frudeevelops%2Fgradientor-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frudeevelops%2Fgradientor-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frudeevelops%2Fgradientor-app/lists"}