🌈 Dynamic Coloful Image Render
npm install capsule-render
English
·
한국어
·
Español
·
Français
·
Deutsch
简体中文
·
繁體中文
·
繁體粤语
·
Português (Brasileiro)
·
日本語
·
മലയാളം
·
Русский
[!TIP] Supports simple Generator. However, we recommend reading the README for more detailed adjustments.
[!IMPORTANT] This service is provided on a best-effort basis and may be unstable due to usage limits or traffic spikes.
For reliable use, please fork the repository and deploy it to your own Vercel instance (or another hosting platform).
Navigation
- How to Use
- Types
- Color
- Custom Color List
- Theme
- Section
- Reversal
- Height
- Text
- Desc
- Text Background
- Text Animation
- Font Color
- FontFamily
- Font Size
- Font Align - X
- Font Align - Y
- Desc Size
- Desc Align - X
- Desc Align - Y
- Rotate
- Stroke
- Stroke-width
- Demo
Any of Idea -> Idea-Issue or PR
How to Use
https://capsule-render.vercel.app/api?
Just write query parameter end of this url. Like this
Markdown:
HTML:
<img src="https://capsule-render.vercel.app/api?type=wave&color=auto&height=300§ion=header&text=capsule%20render&fontSize=90" />
Types
Type data makes to change Background Image.
- wave : default
- egg
- shark
- slice
- rect
- soft
- rounded
- cylinder
- waving
- venom
- speech
- blur
- pulse
- checkered
- transparent
Write &type= on the URL
Color
Change Background Image!
&color=auto: Proven random color. List are here&color=timeAuto: Proven random color, but is decided by time.&color=random: Really random color. I don't know what colors are showing.&color=gradient: Proven random gradient. List are here&color=timeGradient: Proven random gradient, but is decided by time.&color=_hexcode: default(#B897FF)&color=_custom_gradient: Custom gradient. If write as&color=0:EEFF00,100:a82da8, it will be converted to { 0%: 'EEFF00', 100%: 'a82da8' }. (e.g. DEMO)
If you use auto mode. no need to change fontColor.
auto also change fontColor auto.
If you use static color. Do not write '#'
When use
timeAutoandtimeGradient?Used section
headerandfooterat the same time.
Custom Color List
You can customize the list of colors that will appear randomly only for &color=auto and &color=gradient.
Write &customColorList= on the URL.
- If you use
&color=auto, look at pallete list. - If you use
&color=gradient, look at gradient list.
Pick the color patterns you want and remember the idx value.
For example, if the idx values are 0, 2, and 3, write: &customColorList=0,2,3
If you want to make many apperances of idx=2, you can write them repeatedly. (e.g. &customColorList=0,2,2,2,2,3)
Theme
You can use the specified combination using theme=.
Even if color and fontColor are used, theme has the highest priority.
Check the list of available themes at pallete_theme.json.
I'm currently adding combinations from the Link:theme little by little.
Section
Section data makes reverse Background Image.
§ion=header: (default)§ion=footer
Write §ion= on the URL
Reversal
Reverse the image left and right. (Color at the same time)
&reversal=false: (default)&reversal=true
Height
Change Image Size. Default value is 120.
Write &height= on the URL
Do not write
px
Text
Input text over the Image.
Write Something &text= .
You can't use some Special Characters. Like '#', '&', '/' ...
It makes confused API
It is recommended to use
%20(blank) and-nl-(new line) only
Desc
Input desc over the Image.
Write Something &desc= .
You can't use some Special Characters. Like '#', '&', '/' ...
It makes confused API
It is recommended to use
%20(blank) and-nl-(new line) only
Text Background
Background of Text.
Write &textBg=true to active.
If you want to increase background-size, add
%20between text values. This is because background-size depends on the length of the english-text. (%20 means spacing)
Text Animation
Make the text dynamic.
Write &animation= , if you want to use.
fadeIn: fadeIn 1.2sscaleIn: scaleIn .8sblink: blink .6sblinking: blinking 1.6stwinkling: twinkling 4s
FontColor
Change text color. Default value is 000000.
Value should be Hex code with erased '#'
Write &fontColor= behind Text query
FontFamily
Change text font family.
Write &fontFamily= behind Text query.
Use %20 for spaces in font names.
fontFamilyis applied as CSSfont-family, but actual rendering depends on fonts available in the rendering environment. If a font is unavailable, fallback fonts are used.
FontSize
Change text font size. Default value is 70.
Write &fontSize= behind Text query
Do not write
px
FontAlign
Change text horizontal-align (x). write number between 0~100
&fontAlign= : Default value is 50. center of image
In case there are multiple lines in
&text=(-nl-), providing multiple&fontAlign=will apply different horizontal-align to each line individually.
FontAlignY
Change text vertical-align (y). write number between 0~100
&fontAlignY= : 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.
In case there are multiple lines in
&text=(-nl-), providing multiple&fontAlignY=will apply different vertical-align to each line individually.
DescSize
Change desc font size. Default value is 20.
Write &descSize= behind desc query
Do not write
px
DescAlign
Change desc horizontal-align (x). write number between 0~100
&descAlign= : Default value is 50. center of image
DescAlignY
Change text vertical-align (y). write number between 0~100
&descAlignY= : Default value is 60. center of image
Rotate
Usage &rotate= , to rotate text.
You can also use negative number.
Recommend number arrange. ☞
0 ~ 360,0 ~ -360.
Stroke
Change text stroke.
Write &stroke= behind query
Value should be Hex code with erased '#'
Recommended to use with
strokeWidth.When used alone, strokeWidth defaults to 1.
Stroke-width
Change text stroke width.
Write &strokeWidth= behind stroke query
Value must be greater than or equal to 0.
Recommended to use with
stroke.When used alone, stroke defaults to 'B897FF'.
Demo
Wave
Egg
Shark
Slice
Rect
Soft
Rounded
Cylinder
Waving
Transparent
Venom
Speech
Blur
Pulse
Checkered
