Components AI — A new way to explore generative design systems

Rad Sparkle

Folded Text

Canvas Bg

Color

Top

Bottom

Text Fold

Split

Text

Typography

Font Family

Font Size

Text Transform

Font Style

Line Height1.07

Letter Spacing0

Font Weight

Font Variant Caps

Font Stretch

Text Orientation

Effects

Blend Mode

Blur

Opacity

Skew Y

Rotation

CSS

.folded-text {
position: absolute;
top: 50%;
left: 50%;
white-space: nowrap;
text-rendering: optimizeLegibility;
filter: blur(0px);
opacity: 1;
mix-blend-mode: none;
font-weight: undefined;
font-size: 25px;
color: #19bb4a;
transform: translate(-50%, -50%) skew(10deg) rotateX(-10deg) rotateY(-0deg) rotateZ(-17deg);
fontStyle: italic;
fontFamily: system-ui, sans-serif;
fontVariantCaps: normal;
textAlign: [right, right, right];
textTransform: full-size-kana;
letterSpacing: 0em
}
.folded-text:before {
content: Rad Sparkle;
position: absolute;
left: 0;
top: 0;
overflow: hidden;
width: 100%;
color: #ecd2f9;
transform:translate(0; 0) skew(-192deg) scale(1; 1.2);
clipPath: polygon(0% 0%, 0 50%, 100% 50%, 100% 0%),
zIndex: 2,
textShadow: 2px -1px 6px rgba(0,0,0,0.2)
}
.folded-text:after {
content: Rad Sparkle;
position: absolute;
left: 0;
top: 0;
overflow: hidden;
width: 100%;
height: 100%;
zIndex: 1;
color: #4a69b2;
transform: translate(0, 0) skew(192deg) scale(1, .9);
clipPath: polygon(0 50%, 100% 50%, 100% 100%, 0% 100%);
textShadow: 2px -1px 6px rgba(0,0,0,0.3);
}

Js

import styled from '@emotion/styled'

const FoldedText = styled('p')({
position: 'absolute',
top: '50%',
left: '50%',
whiteSpace: 'nowrap',
textRendering: 'optimizeLegibility',
filter: 'blur(0px)',
opacity: 1,
mixBlendMode: 'none',
fontWeight: undefined,
fontSize: ['25px','33px','196px'],
color: '#19bb4a',
':before': {
content: 'Rad Sparkle',
position: 'absolute',
left: 0,
top: 0,
overflow: 'hidden',
width: '100%',
color: '#ecd2f9',
transform:'translate(0, 0) skew(-192deg) scale(1, 1.2)',
clipPath: 'polygon(0% 0%, 0 50%, 100% 50%, 100% 0%)',
zIndex: 2,
textShadow: '2px -1px 6px rgba(0,0,0,0.2)'
},
':after': {
content: 'Rad Sparkle',
position: 'absolute',
left: 0,
top: 0,
overflow: 'hidden',
width: '100%',
height: '100%',
zIndex: 1,
color: '#4a69b2',
transform: 'translate(0, 0) skew(192deg) scale(1, .9)',
clipPath: 'polygon(0 50%, 100% 50%, 100% 100%, 0% 100%)',
textShadow: '2px -1px 6px rgba(0,0,0,0.3)'
},
transform: 'translate(-50%, -50%) skew(10deg) rotateX(-10deg) rotateY(-0deg) rotateZ(-17deg)',
fontStyle: 'italic',
fontFamily: 'system-ui, sans-serif',
fontVariantCaps: 'normal',
textAlign: ['right', 'right', 'right'],
textTransform: 'full-size-kana',
letterSpacing: '0em'

})

Reference: Original Demo