{"id":13588930,"url":"https://github.com/kyechan99/capsule-render","last_synced_at":"2025-05-14T09:10:16.577Z","repository":{"id":37596882,"uuid":"280360410","full_name":"kyechan99/capsule-render","owner":"kyechan99","description":"🌈 Dynamic Coloful Image Render","archived":false,"fork":false,"pushed_at":"2025-05-08T06:24:13.000Z","size":959,"stargazers_count":1424,"open_issues_count":7,"forks_count":667,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-05-14T09:09:58.679Z","etag":null,"topics":["dynamic","dynamic-profile","github-profile","image-generator","profile-readme","readme-generator"],"latest_commit_sha":null,"homepage":"https://capsule-render.vercel.app","language":"TypeScript","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/kyechan99.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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,"zenodo":null}},"created_at":"2020-07-17T07:43:30.000Z","updated_at":"2025-05-14T06:25:34.000Z","dependencies_parsed_at":"2023-11-28T08:28:10.959Z","dependency_job_id":"a6fecab0-8a0b-4b10-93a4-e1b0cc87ebcb","html_url":"https://github.com/kyechan99/capsule-render","commit_stats":{"total_commits":101,"total_committers":8,"mean_commits":12.625,"dds":"0.37623762376237624","last_synced_commit":"baba2bc039d97ed81ef3aa8573bee4229ea4de1e"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kyechan99%2Fcapsule-render","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kyechan99%2Fcapsule-render/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kyechan99%2Fcapsule-render/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kyechan99%2Fcapsule-render/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kyechan99","download_url":"https://codeload.github.com/kyechan99/capsule-render/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254110374,"owners_count":22016391,"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":["dynamic","dynamic-profile","github-profile","image-generator","profile-readme","readme-generator"],"created_at":"2024-08-01T15:49:20.385Z","updated_at":"2025-05-14T09:10:16.506Z","avatar_url":"https://github.com/kyechan99.png","language":"TypeScript","readme":"\u003cp align='center'\u003e\n    \u003cimg src=\"https://capsule-render.vercel.app/api?type=waving\u0026color=auto\u0026height=300\u0026section=header\u0026text=capsule%20render\u0026fontSize=90\u0026animation=fadeIn\u0026fontAlignY=38\u0026desc=Decorate%20GitHub%20Profile%20or%20any%20Repo%20like%20me!\u0026descAlignY=51\u0026descAlign=62\"/\u003e\n\u003c/p\u003e\n\n\u003cp align='center'\u003e\n  \u003ca href=\"https://github.com/kyechan99/capsule-render/labels/Idea\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/IDEA%20ISSUE%20-%23F7DF1E.svg?\u0026style=for-the-badge\u0026\u0026logoColor=white\"/\u003e\n  \u003c/a\u003e\n  \u003ca href=\"#demo\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/DEMO%20-%234FC08D.svg?\u0026style=for-the-badge\u0026\u0026logoColor=white\"/\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://capsule-render.vercel.app/\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/Generator%20-%235c86fa.svg?\u0026style=for-the-badge\u0026\u0026logoColor=white\"/\u003e\n  \u003c/a\u003e\n\u003c/p\u003e \n\u003cp align=\"center\"\u003e \n  \u003ca href=\"README.md\"\u003eEnglish\u003c/a\u003e \n  ·\n  \u003ca href=\"/docs/README_kr.md\"\u003e한국어\u003c/a\u003e \n  .\n  \u003ca href=\"/docs/README_fr.md\"\u003eFrançais\u003c/a\u003e\n  .\n  \u003ca href=\"/docs/README_de.md\"\u003eDeutsch\u003c/a\u003e\n  .\n  \u003ca href=\"/docs/README_zh-cn.md\"\u003e简体中文\u003c/a\u003e  \n  .\n  \u003ca href=\"/docs/README_zh-tw.md\"\u003e繁體中文\u003c/a\u003e\n  .\n  \u003ca href=\"/docs/README_zh-hk.md\"\u003e繁體粤语\u003c/a\u003e\n  . \n  \u003ca href=\"/docs/README_pt-br.md\"\u003ePortuguês (Brasileiro)\u003c/a\u003e\n\u003c/p\u003e\n\u003cbr/\u003e\n\n\u003e Looking for someone to translate this README.\n\n\u003e Supports simple [Generator](https://capsule-render.vercel.app/).\n\u003e However, we recommend reading the README for more detailed adjustments.\n\n## Navigation\n\n1. [How to Use](#how-to-use)\n2. [Types](#types)\n3. [Color](#color)\n4. [Custom Color List](#custom-color-list)\n5. [Section](#section)\n6. [Reversal](#reversal)\n7. [Height](#height)\n8. [Text](#text)\n9. [Desc](#desc)\n10. [Text Background](#text-background)\n11. [Text Animation](#text-animation)\n12. [Font Color](#fontcolor)\n13. [Font Size](#fontsize)\n14. [Font Align - X](#fontalign)\n15. [Font Align - Y](#fontaligny)\n16. [Desc Size](#descsize)\n17. [Desc Align - X](#descalign)\n18. [Desc Align - Y](#descaligny)\n19. [Rotate](#rotate)\n20. [Demo](#demo)\n\nAny of Idea -\u003e [Idea-Issue](https://github.com/kyechan99/capsule-render/labels/Idea) or [PR](https://github.com/kyechan99/capsule-render/pulls)\n\n# How to Use\n\n```\nhttps://capsule-render.vercel.app/api?\n```\n\nJust write query parameter end of this url. Like this\n\nMarkdown:\n\n```\n![header](https://capsule-render.vercel.app/api?type=wave\u0026color=auto\u0026height=300\u0026section=header\u0026text=capsule%20render\u0026fontSize=90)\n```\n\nHTML:\n\n```\n\u003cimg src=\"https://capsule-render.vercel.app/api?type=wave\u0026color=auto\u0026height=300\u0026section=header\u0026text=capsule%20render\u0026fontSize=90\" /\u003e\n```\n\n## Types\n\nType data makes to change Background Image.\n\n- [wave](#wave) : default\n- [egg](#egg)\n- [shark](#shark)\n- [slice](#slice)\n- [rect](#rect)\n- [soft](#soft)\n- [rounded](#rounded)\n- [cylinder](#cylinder)\n- [waving](#waving)\n- [venom](#venom)\n- [speech](#speech)\n- [blur](#blur)\n- [transparent](#transparent)\n\nWrite `\u0026type= ` on the URL\n\n```\n![header](https://capsule-render.vercel.app/api?type=slice)\n```\n\n## Color\n\nChange Background Image!\n\n- `\u0026color=auto` : Proven random color. List are [here](https://github.com/kyechan99/capsule-render/blob/master/src/pallete.json)\n- `\u0026color=timeAuto` : Proven random color, but is decided by time.\n- `\u0026color=random` : Really random color. I don't know what colors are showing.\n- `\u0026color=gradient` : Proven random gradient. List are [here](https://github.com/kyechan99/capsule-render/blob/master/src/gradient.json)\n- `\u0026color=timeGradient` : Proven random gradient, but is decided by time.\n- `\u0026color=_hexcode` : default(#B897FF)\n- `\u0026color=_custom_gradient` : Custom gradient. If write as `\u0026color=0:EEFF00,100:a82da8`, it will be converted to { 0%: 'EEFF00', 100%: 'a82da8' }. (e.g. [DEMO](https://capsule-render.vercel.app/api?type=rect\u0026color=0:EEFF00,100:a82da8))\n\nIf you use `auto` mode. no need to change `fontColor`.\n`auto` also change fontColor auto.\n\n```\n![header](https://capsule-render.vercel.app/api?color=auto)\n```\n\n\u003e If you use static color. Do not write '#'\n\n\u003e When use `timeAuto` and `timeGradient`?\n\u003e\n\u003e Used section `header` and `footer` at the same time.\n\n## Custom Color List\n\nYou can **customize the list of colors** that will appear randomly only for `\u0026color=auto` and `\u0026color=gradient`.\n\nWrite `\u0026customColorList= ` on the URL.\n\n- If you use `\u0026color=auto`, look at [pallete list](https://github.com/kyechan99/capsule-render/blob/master/src/pallete.json).\n- If you use `\u0026color=gradient`, look at [gradient list](https://github.com/kyechan99/capsule-render/blob/master/src/gradient.json).\n\nPick the color patterns you want and remember the `idx` value.\n\nFor example, if the idx values ​​are 0, 2, and 3, write: `\u0026customColorList=0,2,3`\n\nIf you want to make many apperances of `idx=2`, you can write them repeatedly. (e.g. `\u0026customColorList=0,2,2,2,2,3`)\n\n```\n![header](https://capsule-render.vercel.app/api?color=gradient\u0026customColorList=0,2,2,5,30)\n```\n\n## Theme\n\nYou can use the specified combination using `theme=`.\n\nEven if `color` and `fontColor` are used, theme has the highest priority.\n\nCheck the list of available themes at [pallete_theme.json](https://github.com/kyechan99/capsule-render/blob/master/src/pallete_theme.json).\n\n```\n![reversal](https://capsule-render.vercel.app/api?type=rect\u0026text=RECT\u0026fontAlign=30\u0026fontSize=30\u0026desc=Use%20theme\u0026descAlign=60\u0026descAlignY=50\u0026theme=radical)\n```\n\n\u003e I'm currently adding combinations from the [Link:theme](https://github.com/anuraghazra/github-readme-stats/blob/master/themes/README.md) little by little.\n\n## Section\n\nSection data makes reverse Background Image.\n\n- `\u0026section=header` : (default)\n- `\u0026section=footer`\n\nWrite `\u0026section= ` on the URL\n\n```\n![footer](https://capsule-render.vercel.app/api?section=footer)\n```\n\n## Reversal\n\nReverse the image left and right. (Color at the same time)\n\n- `\u0026reversal=false` : (default)\n- `\u0026reversal=true`\n\n```\n![reversal](https://capsule-render.vercel.app/api?type=slice\u0026reversal=true\u0026color=gradient)\n```\n\n## Height\n\nChange Image Size. Default value is 120.\n\nWrite `\u0026height= ` on the URL\n\n```\n![header](https://capsule-render.vercel.app/api?height=400)\n```\n\n\u003e Do not write `px`\n\n## Text\n\nInput text over the Image.\n\nWrite Something `\u0026text= `.\n\n```\n![header](https://capsule-render.vercel.app/api?text=Hello%World!)\n```\n\n\u003e You can't use some Special Characters. Like '#', '\u0026', '/' ...\n\u003e\n\u003e It makes confused API\n\n\u003e It is recommended to use `%20` (blank) and `-nl-` (new line) only\n\n## Desc\n\nInput desc over the Image.\n\nWrite Something `\u0026desc= `.\n\n```\n![header](https://capsule-render.vercel.app/api?height=400\u0026text=Hello%20World!\u0026desc=Hello%20capsule%20render)\n```\n\n\u003e You can't use some Special Characters. Like '#', '\u0026', '/' ...\n\u003e\n\u003e It makes confused API\n\n\u003e It is recommended to use `%20` (blank) only\n\n## Text Background\n\nBackground of Text.\n\nWrite `\u0026textBg=true` to active.\n\n\u003e If you want to increase background-size,\n\u003e add `%20` between text values.\n\u003e This is because background-size depends on the length of the english-text. (%20 means spacing)\n\n```\n![header](https://capsule-render.vercel.app/api?type=rounded\u0026color=gradient\u0026text=%20asdf%20\u0026height=300\u0026fontSize=100\u0026textBg=true)\n```\n\n## Text Animation\n\nMake the text dynamic.\n\nWrite `\u0026animation= `, if you want to use.\n\n- `fadeIn` : fadeIn 1.2s\n- `scaleIn` : scaleIn .8s\n- `blink` : blink .6s\n- `blinking` : blinking 1.6s\n- `twinkling` : twinkling 4s\n\n```\n![header](https://capsule-render.vercel.app/api?text=capsule_render\u0026animation=fadeIn)\n```\n\n## FontColor\n\nChange text color. Default value is 000000.\n\nValue should be Hex code with erased '#'\n\nWrite `\u0026fontColor= ` behind **Text** query\n\n```\n![header](https://capsule-render.vercel.app/api?text=Hello%World!\u0026fontColor=d6ace6)\n```\n\n## FontSize\n\nChange text font size. Default value is 70.\n\nWrite `\u0026fontSize= ` behind **Text** query\n\n```\n![header](https://capsule-render.vercel.app/api?text=Hello%World!\u0026fontSize=40)\n```\n\n\u003e Do not write `px`\n\n## FontAlign\n\nChange text horizontal-align (x). write number **between 0~100**\n\n`\u0026fontAlign= ` : Default value is 50. center of image\n\n\u003e In case there are multiple lines in `\u0026text= ` (`-nl-`), providing multiple `\u0026fontAlign= ` will apply different horizontal-align to each line individually.\n\n```\n![header](https://capsule-render.vercel.app/api?text=Hello%World!\u0026fontAlign=70)\n```\n\n## FontAlignY\n\nChange text vertical-align (y). write number **between 0~100**\n\n`\u0026fontAlignY= ` : Default value for one line is 50 (center of image). For multiple lines (separated by `-nl-`), default will be calculated to get lines stacked on top of each other and centered.\n\n\u003e In case there are multiple lines in `\u0026text= ` (`-nl-`), providing multiple `\u0026fontAlignY= ` will apply different vertical-align to each line individually.\n\n```\n![header](https://capsule-render.vercel.app/api?text=Hello%World!\u0026fontAlignY=20)\n```\n\n## DescSize\n\nChange desc font size. Default value is 20.\n\nWrite `\u0026descSize= ` behind **desc** query\n\n```\n![header](https://capsule-render.vercel.app/api?text=Hello%World!\u0026fontSize=40\u0026desc=Desc\u0026descSize=30)\n```\n\n\u003e Do not write `px`\n\n## DescAlign\n\nChange desc horizontal-align (x). write number **between 0~100**\n\n`\u0026descAlign= ` : Default value is 50. center of image\n\n```\n![header](https://capsule-render.vercel.app/api?text=Hello%World!\u0026fontAlign=70\u0026desc=Desc\u0026descAlign=20)\n```\n\n## DescAlignY\n\nChange text vertical-align (y). write number **between 0~100**\n\n`\u0026descAlignY= ` : Default value is 60. center of image\n\n```\n![header](https://capsule-render.vercel.app/api?text=Hello%World!\u0026fontAlignY=20\u0026desc=Desc\u0026descAlignY=40)\n```\n\n## Rotate\n\nUsage `\u0026rotate= `, to rotate text.\n\nYou can also use negative number.\n\n\u003e Recommend number arrange. ☞ `0 ~ 360`, `0 ~ -360`.\n\n```\n![header](https://capsule-render.vercel.app/api?text=Hello%World!\u0026fontSize=20\u0026rotate=-30)\n```\n\n## Stroke\n\nChange text stroke.\n\nWrite `\u0026stroke=` behind query\n\nValue should be Hex code with erased '#'\n\n```\n![header](https://capsule-render.vercel.app/api?type=rect\u0026height=200\u0026text=Stroke%20Test\u0026fontAlign=70\u0026stroke=00FF00)\n```\n\n\u003e Recommended to use with `strokeWidth`.\n\u003e\n\u003e When used alone, strokeWidth defaults to 1.\n\n## Stroke-width\n\nChange text stroke width.\n\nWrite `\u0026strokeWidth=` behind stroke query\n\nValue must be greater than or equal to 0.\n\n```\n![header](https://capsule-render.vercel.app/api?type=rect\u0026height=200\u0026text=Stroke%20Test\u0026fontAlign=70\u0026stroke=00FF00\u0026strokeWidth=3)\n```\n\n\u003e Recommended to use with `stroke`.\n\u003e\n\u003e When used alone, stroke defaults to 'B897FF'.\n\n# Demo \u003ca id=\"demo\"\u003e\n\n## Wave \u003ca id=\"wave\"\u003e\n\n![wave](https://capsule-render.vercel.app/api?type=wave\u0026color=auto\u0026height=200\u0026text=WAVE)\n\n## Egg \u003ca id=\"egg\"\u003e\n\n![egg](https://capsule-render.vercel.app/api?type=egg\u0026color=auto\u0026height=210)\n\n## Shark \u003ca id=\"shark\"\u003e\n\n![shark](https://capsule-render.vercel.app/api?type=shark\u0026color=gradient\u0026height=140)\n\n## Slice \u003ca id=\"slice\"\u003e\n\n![slice](https://capsule-render.vercel.app/api?type=slice\u0026color=auto\u0026height=200\u0026text=SLICE\u0026fontAlign=70\u0026rotate=13\u0026fontAlignY=25\u0026desc=desc%20function%20is%20also%20rotated.\u0026descAlign=60\u0026descAlignY=44)\n\n## Rect \u003ca id=\"rect\"\u003e\n\n![rect](https://capsule-render.vercel.app/api?type=rect\u0026color=gradient\u0026text=%20%20RECT%20%20\u0026fontAlign=30\u0026fontSize=30\u0026textBg=true\u0026desc=Use%20%27textBg%27%20to%20highlight%20%27text%27\u0026descAlign=60\u0026descAlignY=50)\n\n## Soft \u003ca id=\"soft\"\u003e\n\n![soft](https://capsule-render.vercel.app/api?type=soft\u0026color=auto\u0026text=Good%20to%20use%20with%20other%20readme\u0026fontSize=40\u0026animation=twinkling)\n\n## Rounded \u003ca id=\"rounded\"\u003e\n\n![rounded](https://capsule-render.vercel.app/api?type=rounded\u0026color=timeAuto\u0026text=Rounded%20with%20stroke\u0026fontAlignY=50\u0026fontSize=40\u0026height=200\u0026stroke=000000\u0026strokeWidth=2)\n\n## Cylinder \u003ca id=\"cylinder\"\u003e\n\n![cylinder](https://capsule-render.vercel.app/api?type=cylinder\u0026color=auto\u0026text=Cylinder\u0026fontAlignY=45\u0026fontSize=40\u0026height=150\u0026animation=blinking\u0026desc=desc%20is%20also%20animated\u0026descAlignY=70)\n\n## Waving \u003ca id=\"waving\"\u003e\n\n![waving](https://capsule-render.vercel.app/api?type=waving\u0026height=200\u0026text=Waving!\u0026fontAlign=80\u0026fontAlignY=40\u0026color=gradient)\n\n## Transparent \u003ca id=\"transparent\"\u003e\n\n![transparent](https://capsule-render.vercel.app/api?type=transparent\u0026fontColor=703ee5\u0026text=Transparent\u0026height=150\u0026fontSize=60\u0026desc=Only%20Use%20Text\u0026descAlignY=75\u0026descAlign=60)\n\n## Venom \u003ca id=\"venom\"\u003e\n\n![venom](https://capsule-render.vercel.app/api?type=venom\u0026height=200\u0026text=I%20am%20Venom.\u0026fontSize=70\u0026color=0:8871e5,100:b678c4\u0026stroke=b678c4)\n\n## Speech \u003ca id=\"speech\"\u003e\n\n![speech](https://capsule-render.vercel.app/api?type=speech\u0026height=200\u0026fontSize=45\u0026color=gradient\u0026text=speech-nl-bubble\u0026animation=blinking\u0026fontAlign=30,60\u0026fontAlignY=35,55)\n\n## Blur \u003ca id=\"blur\"\u003e\n\n![blur](https://capsule-render.vercel.app/api?type=blur\u0026height=300\u0026color=gradient\u0026text=Blur\u0026strokeWidth=2\u0026section=footer\u0026reversal=true\u0026fontAlign=50\u0026stroke=E0E0E0\u0026fontSize=55\u0026textBg=false)\n\n\u003chr/\u003e\n","funding_links":[],"categories":["🛠️ Tools \u0026 Generators","🛠️ Widgets 👇","🏝 Banner \u0026 Badges","TypeScript","🛠️ Outils et Ressources"],"sub_categories":["Header \u0026 Banner Generators","🔗 Ressources Externes"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkyechan99%2Fcapsule-render","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkyechan99%2Fcapsule-render","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkyechan99%2Fcapsule-render/lists"}