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.37

Letter Spacing0

Font Weight

Font Variant Caps

Font Stretch

Text Orientation

Text Shadow

Color

Blur

Offset X

Offset Y

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: 201px;
color: #dee49d;
transform: translate(-50%, -50%) skew(10deg) rotateX(-10deg) rotateY(-0deg) rotateZ(-17deg);
fontStyle: italic;
fontFamily: "avenir next", avenir, sans-serif;
fontVariantCaps: small-caps;
textAlign: [right, right, right];
textTransform: full-width;
letterSpacing: 0em
}
.folded-text:before {
content: Rad Sparkle;
position: absolute;
left: 0;
top: 0;
overflow: hidden;
width: 100%;
color: #3ca32b;
transform:translate(0; 0) skew(-177deg) 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: #cd18e0;
transform: translate(0, 0) skew(177deg) 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: ['201px','209px','242px'],
color: '#dee49d',
':before': {
content: 'Rad Sparkle',
position: 'absolute',
left: 0,
top: 0,
overflow: 'hidden',
width: '100%',
color: '#3ca32b',
transform:'translate(0, 0) skew(-177deg) 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: '#cd18e0',
transform: 'translate(0, 0) skew(177deg) 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: '"avenir next", avenir, sans-serif',
fontVariantCaps: 'small-caps',
textAlign: ['right', 'right', 'right'],
textTransform: 'full-width',
letterSpacing: '0em'

})

Reference: Original Demo

Previous likes