Casy.js

DownButton

X

import React from 'react';
import styled from 'styled-components';

const Button = styled.button`
  /* ---- CSS Variables Section ----- */
  --trans-spd: 420ms;
  --cubic-curve: cubic-bezier(0.57, 0.43, 0, 1.01);
  --btn-color: ${props => (props.btnColor ? props.btnColor : '#2f77bb')};
  --arrow-color: ${props => (props.arrowColor ? props.arrowColor : '#3b3c36')};
  --arrow-hover: ${props => (props.arrowHover ? props.arrowHover : '#fff')};
  /* -------------------------------- */
  font-size: 50px;
  padding: 2px 17px;
  background: transparent;
  border: 3px solid var(--btn-color);
  color: var(--arrow-color);
  position: relative;
  z-index: 2;
  cursor: pointer;
  transition: color var(--trans-spd) var(--cubic-curve);

  &:hover {
    color: var(--arrow-hover);
  }

  &::before {
    content: '';
    background: var(--btn-color);
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: 0;
    left: 0;
    z-index: -1;
    transform: scaleY(0);
    transform-origin: 0 100%;
    transition: transform var(--trans-spd) var(--cubic-curve);
  }

  &:hover::before {
    transform: scaleY(1);
  }
`;

const DownButton = props => {
  return (
    <Button
      btnColor={props.btnColor}
      arrowColor={props.arrowColor}
      arrowHover={props.arrowHover}
    >
      &darr;
    </Button>
  );
};

export default DownButton;

✂️

Usage

Example usage of component with optional props


<DownButton
  btnColor="var(--pri-color)"
  arrowColor="var(--black)"
  arrowHover="white"
/>;

X

DarkenButton

X

import React from 'react';
import styled from 'styled-components';

const Button = styled.button`
  /* ---- CSS Variables Section ----- */
  --btn-color: ${props => (props.btnColor ? props.btnColor : '#5f9ea0')};
  --hover-color: ${props => (props.hoverColor ? props.hoverColor : '#538b8d')};
  --font-color: ${props => (props.fontColor ? props.fontColor : '#fff')};
  --trans-speed: 250ms;
  /* -------------------------------- */
  font-size: 30px;
  padding: 10px 30px;
  border: 0;
  border-radius: 5px;
  background: var(--btn-color);
  color: var(--font-color);
  cursor: pointer;
  transition: background-color var(--trans-speed);

  &:hover {
    background: var(--hover-color);
  }
`;

const DarkenButton = props => {
  return (
    <Button
      fontColor={props.fontColor}
      btnColor={props.btnColor}
      hoverColor={props.hoverColor}
    >
      {props.children}
    </Button>
  );
};

export default DarkenButton;

✂️

Usage

Example usage of component with optional props


<DarkenButton
  btnColor="var(--pri-color)"
  hoverColor="var(--pri-hover)"
  fontColor="white"
>
  Hello
</DarkenButton>;

X

OutlineButton

X

import React from 'react';
import styled from 'styled-components';

const Button = styled.button`
  /* ---- CSS Variables Section ----- */
  --brdr-color: ${props => (props.brdrColor ? props.brdrColor : '#5f9ea0')};
  --fill-color: ${props => (props.fillColor ? props.fillColor : '#ffffff')};
  --font-color: var(--brdr-color);
  --trans-speed: 250ms;
  /* -------------------------------- */
  font-size: 30px;
  padding: 8px 24px;
  border-radius: 5px;
  border: 2px solid var(--brdr-color);
  color: var(--font-color);
  background: var(--fill-color);
  cursor: pointer;
  transition: background-color var(--trans-speed),
    color calc(var(--trans-speed) * 1.2);

  &:hover {
    color: ${props =>
      props.fontHoverColor ? props.fontHoverColor : 'var(--fill-color)'};
    background: var(--brdr-color);
  }
`;

const OutlineButton = props => {
  return (
    <Button
      brdrColor={props.brdrColor}
      fillColor={props.fillColor}
      fontHoverColor={props.fontHoverColor}
    >
      {props.children}
    </Button>
  );
};

export default OutlineButton;

✂️

Usage

Example usage of component with optional props - fontHoverColor optional if you want a specific color on hover


<OutlineButton
  brdrColor="var(--pri-color)"
  fillColor="var(--pri-off-white)"
  fontHoverColor="var(--pri-off-white)"
>
  Switcheroo
</OutlineButton>;

X

BlockButton

X

import React from 'react';
import styled from 'styled-components';

const Button = styled.button`
  /* ---- CSS Variables Section ----- */
  --btn-color: ${props => (props.btnColor ? props.btnColor : '#5f9ea0')};
  --hover-color: ${props => (props.hoverColor ? props.hoverColor : '#538b8d')};
  --font-color: ${props => (props.fontColor ? props.fontColor : '#fff')};
  --trans-speed: 250ms;
  /* -------------------------------- */
  display: block;
  width: 100%;
  font-size: 30px;
  padding: 10px 30px;
  border: 0;
  border-radius: 5px;
  background: var(--btn-color);
  color: var(--font-color);
  cursor: pointer;
  transition: background-color var(--trans-speed);

  &:hover {
    background: var(--hover-color);
  }
`;

const BlockButton = props => {
  return (
    <Button
      fontColor={props.fontColor}
      btnColor={props.btnColor}
      hoverColor={props.hoverColor}
    >
      {props.children}
    </Button>
  );
};

export default BlockButton;

✂️

Usage

Example usage of component with optional props


<BlockButton
  btnColor="var(--pri-color)"
  hoverColor="var(--pri-hover)"
  fontColor="white"
>
  100% Contained
</BlockButton>;

X

OutlineButtonGroup

X

import React from 'react';
import styled from 'styled-components';

const ButtonGroupWrapper = styled.div`
  /* ---- CSS Variables Section ----- */
  --brdr-color: ${props => (props.brdrColor ? props.brdrColor : '#5f9ea0')};
  --fill-color: ${props => (props.fillColor ? props.fillColor : '#ffffff')};
  --font-color: var(--brdr-color);
  --border-width: 2px;
  --trans-speed: 250ms;
  /* -------------------------------- */
  background: var(--fill-color);
  border: 2px solid var(--brdr-color);
  border-radius: 5px;
  overflow: hidden;
  display: flex;
  justify-content: center;

  @media (max-width: 500px) {
    flex-direction: column;
  }
`;

const Button = styled.button`
  background: var(--fill-color);
  flex: auto;
  font-size: 30px;
  margin: calc(var(--border-width) * -1);
  border: 2px solid var(--brdr-color);
  padding: 10px 30px;
  color: var(--font-color);
  cursor: pointer;
  transition: background-color var(--trans-speed),
    color calc(var(--trans-speed) * 1.2);

  &:hover {
    color: ${props =>
      props.fontHoverColor ? props.fontHoverColor : 'var(--fill-color)'};
    background: var(--brdr-color);
  }
`;

const OutlineButtonGroup = props => {
  return (
    <ButtonGroupWrapper
      brdrColor={props.brdrColor}
      fillColor={props.fillColor}
      fontHoverColor={props.fontHoverColor}
    >
      <Button>Go</Button>
      <Button>For</Button>
      <Button>It</Button>
    </ButtonGroupWrapper>
  );
};

export default OutlineButtonGroup;

✂️

Usage

Example usage of component with optional props - fontHoverColor optional if you want a specific color on hover


<OutlineButtonGroup
  brdrColor="var(--pri-color)"
  fillColor="var(--pri-off-white)"
  fontHoverColor="var(--pri-off-white)"
/>;

X

DarkenButtonGroup

X

import React from 'react';
import styled from 'styled-components';

const ButtonWrapper = styled.div`
  /* ---- CSS Variables Section ----- */
  --btn-color: ${props => (props.btnColor ? props.btnColor : '#5f9ea0')};
  --hover-color: ${props => (props.hoverColor ? props.hoverColor : '#538b8d')};
  --font-color: ${props => (props.fontColor ? props.fontColor : '#fff')};
  --border-width: 2px;
  --trans-speed: 250ms;
  /* -------------------------------- */
  border: none;
  border-radius: 5px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;

  @media (max-width: 500px) {
    flex-direction: column;
  }
`;

const Button = styled.button`
  flex: auto;
  margin: calc(var(--border-width) * -1);
  border: var(--border-width) solid white;
  padding: 10px 30px;
  font-size: 30px;
  background: var(--btn-color);
  color: var(--font-color);
  cursor: pointer;
  transition: background-color var(--trans-speed);

  &:hover {
    background: var(--hover-color);
  }
`;

const DarkenButtonGroup = props => {
  return (
    <ButtonWrapper
      fontColor={props.fontColor}
      btnColor={props.btnColor}
      hoverColor={props.hoverColor}
    >
      <Button>Laugh</Button>
      <Button>Out</Button>
      <Button>Loud</Button>
    </ButtonWrapper>
  );
};

export default DarkenButtonGroup;

✂️

Usage

Example usage of component with optional props


<DarkenButtonGroup
  btnColor="var(--pri-color)"
  hoverColor="var(--pri-hover)"
  fontColor="white"
/>;

X

SlideArrowButton

X

import React from 'react';
import styled from 'styled-components';

const Button = styled.button`
  /* ---- CSS Variables Section ----- */
  --btn-color: ${props => (props.btnColor ? props.btnColor : '#5f9ea0')};
  --font-color: ${props => (props.fontColor ? props.fontColor : '#fff')};
  --btn-width: 180px;
  /* -------------------------------- */
  font-size: 20px;
  padding: 15px;
  border: 0;
  border-radius: 5px;
  background: var(--btn-color);
  color: var(--font-color);
  width: var(--btn-width);
  cursor: pointer;
  position: relative;

  &::after {
    content: '⇾';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    transition: all 250ms;
  }

  &:hover::after {
    right: 18px;
    opacity: 1;
  }
`;

const ButtonText = styled.span`
  color: var(--font-color);
  transition: all 250ms;

  ${Button}:hover & {
    padding-right: 28px;
  }
`;

const SlideArrowButton = props => {
  return (
    <Button btnColor={props.btnColor} fontColor={props.fontColor}>
      <ButtonText>{props.children}</ButtonText>
    </Button>
  );
};

export default SlideArrowButton;

✂️

Usage

Example usage of component with optional props


<SlideArrowButton btnColor="var(--pri-color)" fontColor="white">
  Move Aside
</SlideArrowButton>;

X

AniColorLink

X

Campground

import React from 'react';
import styled from 'styled-components';

const A = styled.a`
  /* ---- CSS Variables Section ----- */
  --ani-color: ${props => (props.aniColor ? props.aniColor : '#bfdbff')};
  --font-color: ${props => (props.fontColor ? props.fontColor : '#3b3c36')};
  /* -------------------------------- */
  text-decoration: none;
  color: var(--font-color);
  font-size: 20px;
  padding-right: 15px;
  font-weight: normal;
  cursor: pointer;
  position: relative;
  z-index: 2;

  &::before {
    content: '';
    background: var(--ani-color);
    position: absolute;
    top: 55%;
    left: 0;
    width: 100%;
    height: 15px;
    transform: scaleX(0);
    transform-origin: 0;
    transition: transform 700ms cubic-bezier(0.78, -0.03, 0, 1.05);
    z-index: -1;
  }

  &:hover::before {
    transform: scaleX(1);
  }
`;

const AniColorLink = props => {
  return (
    <A href={props.href} aniColor={props.aniColor} fontColor={props.fontColor}>
      {props.children}
    </A>
  );
};

export default AniColorLink;

✂️

Usage

Example usage of component with optional props - href prop is manditory


<AniColorLink
  href="http://www.casyjs.com"
  aniColor="var(--pri-color)"
  fontColor="var(--black)"
>
  Campground
</AniColorLink>;

X

GrowingLoader

X

import React from 'react';
import styled, { keyframes } from 'styled-components';

const Wrapper = styled.div`
  /* ---- CSS Variables Section ----- */
  --color: ${props => (props.color ? props.color : '#79bec6')};
  --ani-duration: 1234ms;
  --ani-time-func: ease-in-out;
  /* -------------------------------- */
`;

const grow = keyframes`
  0%, 100% {
    transform: scaleY(1);
  }

  50% {
    transform: scaleY(2);
  }
`;

const Bar = styled.span`
  display: inline-block;
  width: 5px;
  height: 18px;
  background-color: var(--color);
  border-radius: 4px;
  margin: 5px;

  &:nth-child(1) {
    animation: ${grow} var(--ani-duration) var(--ani-time-func) infinite;
  }

  &:nth-child(2) {
    animation: ${grow} var(--ani-duration) var(--ani-time-func) 100ms infinite;
  }

  &:nth-child(3) {
    animation: ${grow} var(--ani-duration) var(--ani-time-func) 200ms infinite;
  }

  &:nth-child(4) {
    animation: ${grow} var(--ani-duration) var(--ani-time-func) 300ms infinite;
  }
`;

const GrowingLoader = props => {
  return (
    <Wrapper color={props.color}>
      <Bar />
      <Bar />
      <Bar />
      <Bar />
    </Wrapper>
  );
};

export default GrowingLoader;

✂️

Usage

Example usage of component with optional props


<GrowingLoader color="var(--cp-pri-color)" />;

X

GrowingLoader

X

import React from 'react';
import styled, { keyframes } from 'styled-components';

const Wrapper = styled.div`
  /* ---- CSS Variables Section ----- */
  --color: ${props => (props.color ? props.color : '#79bec6')};
  --ani-duration: 1234ms;
  --ani-time-func: ease-in-out;
  /* -------------------------------- */
`;

const grow = keyframes`
  0%, 100% {
    transform: scaleY(1);
  }

  50% {
    transform: scaleY(2);
  }
`;

const Bar = styled.span`
  display: inline-block;
  width: 5px;
  height: 18px;
  background-color: var(--color);
  border-radius: 4px;
  margin: 5px;

  &:nth-child(1) {
    animation: ${grow} var(--ani-duration) var(--ani-time-func) infinite;
  }

  &:nth-child(2) {
    animation: ${grow} var(--ani-duration) var(--ani-time-func) 100ms infinite;
  }

  &:nth-child(3) {
    animation: ${grow} var(--ani-duration) var(--ani-time-func) 200ms infinite;
  }

  &:nth-child(4) {
    animation: ${grow} var(--ani-duration) var(--ani-time-func) 300ms infinite;
  }
`;

const GrowingLoader = props => {
  return (
    <Wrapper color={props.color}>
      <Bar />
      <Bar />
      <Bar />
      <Bar />
    </Wrapper>
  );
};

export default GrowingLoader;

✂️

Usage

Example usage of component with optional props


<GrowingLoader color="var(--cp-pri-color)" />;

X

NextButton

X

import React from 'react';
import styled, { keyframes, css } from 'styled-components';

const arrowAni = keyframes`
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  5% {
    transform: translateX(-0.1rem);
  }
  100% {
    transform: translateX(1rem);
    opacity: 0;
  }
`;

const arrowFixedAni = keyframes`
  5% {
    opacity: 0;
  }
  20% {
    opacity: 0.4;
  }
  100% {
    opacity: 1;
  }
`;

const Transition = css`
  transition: all 750ms var(--ease);
`;

const Wrapper = styled.div`
  --ease: cubic-bezier(0.2, 1, 0.3, 1);
`;

const G = styled.g`
  transform: ${props => (props.left ? 'rotate(180deg)' : null)};
  transform-origin: 50% 50%;
`;

const Arrow = styled.polygon`
  ${Transition};
`;
const ArrowFixed = styled.polygon`
  ${Transition};
`;
const Path = styled.path`
  ${Transition};
`;

const SVG = styled.svg`
  width: ${props => (props.size ? props.size : '80px')};
  height: auto;
  margin: 0 2rem;
  cursor: pointer;
  overflow: visible;

  &:hover ${Arrow}, &:hover ${ArrowFixed}, &:hover ${Path} {
    fill: ${props => (props.color ? props.color : '#79bec6')};
  }

  &:hover ${Arrow} {
    animation: ${arrowAni} 2500ms var(--ease) infinite;
  }
  &:hover ${ArrowFixed} {
    animation: ${arrowFixedAni} 2500ms var(--ease) infinite;
  }
`;

const NextButton = props => {
  return (
    <Wrapper>
      <SVG
        size={props.size}
        color={props.color}
        viewBox="0 0 18 17"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        xlink="http://www.w3.org/1999/xlink"
      >
        <G left={props.left}>
          <Arrow points="16.3746667 8.33860465 7.76133333 15.3067621 6.904 14.3175671 14.2906667 8.34246869 6.908 2.42790698 7.76 1.43613596" />
          <ArrowFixed points="16.3746667 8.33860465 7.76133333 15.3067621 6.904 14.3175671 14.2906667 8.34246869 6.908 2.42790698 7.76 1.43613596" />
          <Path d="M-1.48029737e-15,0.56157424 L-1.48029737e-15,16.1929159 L9.708,8.33860465 L-2.66453526e-15,0.56157424 L-1.48029737e-15,0.56157424 Z M1.33333333,3.30246869 L7.62533333,8.34246869 L1.33333333,13.4327013 L1.33333333,3.30246869 L1.33333333,3.30246869 Z" />
        </G>
      </SVG>
    </Wrapper>
  );
};

export default NextButton;

✂️

Usage

Example usage of component with optional props - Points right by default


<NextButton left size="75px" color="lightsteelblue" />;

X

ThumbnailSlider

X

import React, { Component } from 'react';
import styled, { keyframes } from 'styled-components';

const Slide = keyframes`
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0%);
  }
`;

const Hidden = keyframes`
  0%, 100% {
    z-index: 2;
  }
`;

const Wrapper = styled.div`
  /* ---- CSS Variables Section ----- */
  --height: ${props => (props.height ? props.height : '320px')};
  --width: ${props => (props.width ? props.width : '100%')};
  /* -------------------------------- */
  overflow: hidden;
  display: flex;
  justify-content: center;
  width: var(--width);
  height: var(--height);
`;

const Slides = styled.ul`
  position: relative;
  z-index: 4;

  list-style: none;
  width: 100%;
  height: 100%;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
  }
`;

const LargeSlide = styled.li`
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  z-index: ${props => (props.slide ? '3' : '1')};
  animation: ${props => (props.slide ? `${Slide} 1s 1` : `${Hidden} 1s 1`)};
`;

const Thumbnails = styled.ul`
  list-style: none;
  display: flex;
  flex-direction: column;
  line-height: 0;

  /* width of thumbnail img */
  width: 35%;

  li {
    flex: auto;
  }
`;

const ThumbnailImg = styled.img`
  width: 100%;
  /* thumbHeight is the number of slides, used to divide height evenly by overall height */
  height: ${props =>
    props.thumbHeight ? `calc(var(--height) / ${props.thumbHeight})` : null};
  object-fit: cover;
  object-position: top;
`;

class ThumbnailSlider extends Component {
  state = {
    slides: []
  };

  componentDidMount() {
    this.setState({
      slides: this.props.images.map(image => false)
    });
  }

  slideIn = e => {
    const target = Number(e.target.alt);
    this.setState({
      slides: this.state.slides.map((image, i) => (i === target ? true : false))
    });
  };

  render() {
    const { images } = this.props;

    return (
      <Wrapper height={this.props.height} width={this.props.width}>
        <Slides>
          {images &&
            images.map((image, i) => (
              <LargeSlide key={i} slide={this.state.slides[i]}>
                <img src={image} alt={i} />
              </LargeSlide>
            ))}
        </Slides>

        <Thumbnails>
          {images &&
            images.map((image, i) => (
              <li key={i}>
                <ThumbnailImg
                  src={image}
                  alt={i}
                  onClick={this.slideIn}
                  thumbHeight={this.state.slides.length}
                />
              </li>
            ))}
        </Thumbnails>
      </Wrapper>
    );
  }
}

export default ThumbnailSlider;

✂️

Usage

Example usage of component with optional props


<ThumbnailSlider
  height="400px"
  width="100%"
  images={[
    'https://cdn.rawgit.com/huijing/filerepo/gh-pages/lw1.jpg',
    'https://cdn.rawgit.com/huijing/filerepo/gh-pages/lw2.jpg',
    'https://cdn.rawgit.com/huijing/filerepo/gh-pages/lw3.jpg',
    'https://cdn.rawgit.com/huijing/filerepo/gh-pages/lw4.jpg',
    'https://cdn.rawgit.com/huijing/filerepo/gh-pages/lw5.jpg'
  ]}
/>;

X

CircleSlider

X

Copy

Paste

Create

CPC

import React, { Component } from 'react';
import styled, { keyframes, css } from 'styled-components';

const Slider = styled.div`
  /* ---- CSS Variables Section ----- */
  --speed: ${props => (props.speed ? props.speed : '500ms')};
  --width: ${props => (props.size ? props.size : '70vw')};
  --height: calc(var(--width) / 2);
  /* -------------------------------- */
  overflow: hidden;
  border: 1px solid black;
  width: var(--width);
  height: var(--height);
  position: relative;
`;

const PrevNextStyles = css`
  font-size: calc(var(--width) / 30);
  position: absolute;
  top: 50%;
  padding: 10px;
  z-index: 999;
  background: black;
  color: white;
  opacity: 0.5;
  transition: opacity var(--speed);

  &:hover {
    opacity: 0.7;
  }
`;

const PrevButton = styled.button`
  ${PrevNextStyles};
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  left: 0;

  &::before {
    content: '← ';
  }
`;

const NextButton = styled.button`
  ${PrevNextStyles};
  right: 0;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;

  &::after {
    content: ' →';
  }
`;

const CenterCircle = styled.div`
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translate(-50%, -50%);
  z-index: 999;
  border-radius: 50%;
  background: ${props => (props.color ? props.color : '#dee1b6')};
  width: calc(var(--width) / 3);
  height: calc(var(--width) / 3);
`;

const Wrap = styled.div`
  overflow: hidden;
  position: absolute;
  top: -60%;
  left: -25%;
  width: calc(var(--width) * 1.5);
  height: calc(var(--width) * 1.5);
  border-radius: 50%;
  transition: transform var(--speed) ease-in-out;

  transform: ${props => (props.rotate ? `rotate(${props.rotate}deg)` : null)};

  display: flex;
  flex-wrap: wrap;
`;

const Box = css`
  flex: 50%;
  display: flex;
  justify-content: center;
  align-items: center;

  span {
    font-size: calc(var(--width) / 15);
    padding-top: calc(var(--width) / 2.2);
    font-weight: bold;
    opacity: 0;
    color: white;
  }
`;

const FadeIn = keyframes`
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
`;

const FadeOut = keyframes`
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
`;

const BoxOne = styled.div`
  order: 1;
  ${Box};
  background: ${props => (props.color ? props.color : '#73c8a9')};
  span {
    animation: ${props =>
      props.count === 1
        ? `calc(var(--speed) / 2) calc(var(--speed) / 2) 1 forwards ${FadeIn}`
        : props.noFadeOut
          ? null
          : `calc(var(--speed) / 2) 1 forwards ${FadeOut}`};

    transform: rotate(-45deg);
  }
`;
const BoxTwo = styled.div`
  order: 2;
  ${Box};
  background: ${props => (props.color ? props.color : '#bd5532')};
  span {
    animation: ${props =>
      props.count === 0
        ? `calc(var(--speed) / 2) calc(var(--speed) / 2) 1 forwards ${FadeIn}`
        : props.noFadeOut
          ? null
          : `calc(var(--speed) / 2) 1 forwards ${FadeOut}`};

    transform: rotate(45deg);
  }
`;
const BoxThree = styled.div`
  order: 4;
  ${Box};
  background: ${props => (props.color ? props.color : '#e1b866')};
  span {
    animation: ${props =>
      props.count === 1
        ? `calc(var(--speed) / 2) calc(var(--speed) / 2) 1 forwards ${FadeIn}`
        : props.noFadeOut
          ? null
          : `calc(var(--speed) / 2) 1 forwards ${FadeOut}`};

    transform: rotate(135deg);
  }
`;
const BoxFour = styled.div`
  order: 3;
  ${Box};
  background: ${props => (props.color ? props.color : '#373b44')};
  span {
    animation: ${props =>
      props.count === 0
        ? `calc(var(--speed) / 2) calc(var(--speed) / 2) 1 forwards ${FadeIn}`
        : props.noFadeOut
          ? null
          : `calc(var(--speed) / 2) 1 forwards ${FadeOut}`};

    transform: rotate(-135deg);
  }
`;

class CircleSlider extends Component {
  state = {
    // Does not allow fadeOut animation on mount
    noFadeOut: true,
    // Controls rotation
    rotate: 45,
    // Toggles FadeIn === 1 and FadeOut === 0
    count: 1
  };

  nextRotate = () => {
    const rotate = this.state.rotate - 90;
    this.setState({
      count: this.state.count + 1,
      noFadeOut: false,
      rotate
    });
  };

  prevRotate = () => {
    const rotate = this.state.rotate + 90;
    this.setState({
      count: this.state.count - 1,
      noFadeOut: false,
      rotate
    });
  };

  render() {
    return (
      <Slider size={this.props.size} speed={this.props.speed}>
        <nav>
          <PrevButton type="button" onClick={this.prevRotate} />
          <NextButton type="button" onClick={this.nextRotate} />
        </nav>

        <CenterCircle color={this.props.centerCircleColor} />
        <Wrap rotate={this.state.rotate}>
          <BoxOne
            color={this.props.color1}
            noFadeOut={this.state.noFadeOut}
            count={Math.abs(this.state.count % 2)}
          >
            <span>{this.props.heading1}</span>
          </BoxOne>
          <BoxTwo
            color={this.props.color2}
            noFadeOut={this.state.noFadeOut}
            count={Math.abs(this.state.count % 2)}
          >
            <span>{this.props.heading2}</span>
          </BoxTwo>
          <BoxThree
            color={this.props.color3}
            noFadeOut={this.state.noFadeOut}
            count={Math.abs(this.state.count % 2)}
          >
            <span>{this.props.heading3}</span>
          </BoxThree>
          <BoxFour
            color={this.props.color4}
            noFadeOut={this.state.noFadeOut}
            count={Math.abs(this.state.count % 2)}
          >
            <span>{this.props.heading4}</span>
          </BoxFour>
        </Wrap>
      </Slider>
    );
  }
}

export default CircleSlider;

✂️

Usage

Example usage of component with optional props


<CircleSlider
  size="70vw"
  speed="600ms"
  heading1="Copy"
  heading2="Paste"
  heading3="Create"
  heading4="CPC"
  color1="#76B8B8"
  color2="#459393"
  color3="#76B8B8"
  color4="#459393"
  centerCircleColor="#176C6C"
/>;

X

SpinningBorder

X

import React from 'react';
import styled, { keyframes } from 'styled-components';

const Spin = keyframes`
  to {
    transform: rotate(360deg);
  }
`;

const Wrapper = styled.div`
  --size: ${props => (props.size ? props.size : '80px')};
  --fill-radius: calc(var(--size) * 2);
  --speed: ${props => (props.speed ? props.speed : '1234ms')};

  --thickness: ${props => (props.thickness ? props.thickness : '20px')};
  --inner-circle: calc(var(--size) - var(--thickness));

  --color: ${props => (props.secColor ? props.secColor : '#005041')};
  --bg: ${props => (props.priColor ? props.priColor : '#26a69a')};
  --inner-bg: ${props => (props.innerColor ? props.innerColor : '#fff')};

  width: var(--size);
  height: var(--size);
  background: var(--bg);
  border-radius: 50%;
  position: relative;
  animation: ${Spin} var(--speed) linear 0s infinite normal;

  &::before,
  &::after {
    content: '';
    position: absolute;
  }

  &::before {
    /* Half Circle / Gradient Fill */
    width: calc(var(--size) / 2);
    height: var(--size);
    border-radius: 0 var(--fill-radius) var(--fill-radius) 0;
    /* --thickness dynamically fades out secColor gradient according to the thickness of the spinner */
    background: linear-gradient(var(--bg) var(--thickness), var(--color));
    top: 0;
    right: 0;
    z-index: 1;
  }

  &::after {
    /* Inner Circle */
    width: var(--inner-circle);
    height: var(--inner-circle);
    background: var(--inner-bg);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
  }
`;

const SpinningBorder = props => {
  return (
    <Wrapper
      priColor={props.priColor}
      secColor={props.secColor}
      innerColor={props.innerColor}
      speed={props.speed}
      size={props.size}
      thickness={props.thickness}
    />
  );
};

export default SpinningBorder;

✂️

Usage

Example usage of component with optional props


<SpinningBorder
  priColor="#26a69a"
  secColor="#005041"
  innerColor="#fff"
  speed="876ms"
  size="85px"
  thickness="20px"
/>;

X

TexturedLink

X

copypastecomponents.com

import React from 'react';
import styled from 'styled-components';

const Wrapper = styled.div`
  font-size: calc(10px + (60 - 10) * (100vmin - 320px) / (1500 - 320));
`;

const A = styled.a`
  text-decoration: none;

  padding: 1em;
  text-align: center;
  font-family: Futura, 'Trebuchet MS', Calibri, 'Helvetica Neue', Arial,
    sans-serif;
  font-size: 1em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-shadow: -0.05em 0.05em rgba(0, 0, 0, 0.2);
  color: white;
  background-color: #222;
  background-image: repeating-linear-gradient(
      45deg,
      transparent 0.15em,
      hsla(197, 62%, 11%, 0.5) 0.15em,
      hsla(197, 62%, 11%, 0.5) 0.2em,
      hsla(5, 53%, 63%, 0) 0.2em,
      hsla(5, 53%, 63%, 0) 0.35em,
      hsla(5, 53%, 63%, 0.5) 0.35em,
      hsla(5, 53%, 63%, 0.5) 0.4em,
      hsla(197, 62%, 11%, 0.5) 0.4em,
      hsla(197, 62%, 11%, 0.5) 0.5em,
      hsla(197, 62%, 11%, 0) 0.5em,
      hsla(197, 62%, 11%, 0) 0.6em,
      hsla(5, 53%, 63%, 0.5) 0.6em,
      hsla(5, 53%, 63%, 0.5) 0.7em,
      hsla(35, 91%, 65%, 0.5) 0.7em,
      hsla(35, 91%, 65%, 0.5) 0.8em,
      hsla(35, 91%, 65%, 0) 0.8em,
      hsla(35, 91%, 65%, 0) 0.85em,
      hsla(5, 53%, 63%, 0.5) 0.85em,
      hsla(5, 53%, 63%, 0.5) 0.9em,
      hsla(5, 53%, 63%, 0) 0.9em,
      hsla(5, 53%, 63%, 0) 0.95em,
      hsla(197, 62%, 11%, 0.5) 0.95em,
      hsla(197, 62%, 11%, 0.5) 1em
    ),
    repeating-linear-gradient(
      135deg,
      transparent 0.15em,
      hsla(197, 62%, 11%, 0.5) 0.15em,
      hsla(197, 62%, 11%, 0.5) 0.2em,
      hsla(5, 53%, 63%, 0) 0.2em,
      hsla(5, 53%, 63%, 0) 0.35em,
      hsla(5, 53%, 63%, 0.5) 0.35em,
      hsla(5, 53%, 63%, 0.5) 0.4em,
      hsla(197, 62%, 11%, 0.5) 0.4em,
      hsla(197, 62%, 11%, 0.5) 0.5em,
      hsla(197, 62%, 11%, 0) 0.5em,
      hsla(197, 62%, 11%, 0) 0.6em,
      hsla(5, 53%, 63%, 0.5) 0.6em,
      hsla(5, 53%, 63%, 0.5) 0.7em,
      hsla(35, 91%, 65%, 0.5) 0.7em,
      hsla(35, 91%, 65%, 0.5) 0.8em,
      hsla(35, 91%, 65%, 0) 0.8em,
      hsla(35, 91%, 65%, 0) 0.85em,
      hsla(5, 53%, 63%, 0.5) 0.85em,
      hsla(5, 53%, 63%, 0.5) 0.9em,
      hsla(5, 53%, 63%, 0) 0.9em,
      hsla(5, 53%, 63%, 0) 1em,
      hsla(197, 62%, 11%, 0.5) 1em,
      hsla(197, 62%, 11%, 0.5) 1.1em
    );
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.15);
`;

const TexturedLink = props => {
  return (
    <div>
      <Wrapper>
        <A href={props.href} target="_blank">
          {props.children}
        </A>
      </Wrapper>
    </div>
  );
};

export default TexturedLink;

✂️

Usage

Example usage of component with optional props


<TexturedLink href="http://www.casyjs.com">
  copypastecomponents.com
</TexturedLink>;

X

CircleSlideLink

X

click me↠

import React from 'react';
import styled from 'styled-components';

const Wrapper = styled.div`
  /* ---- CSS Variables Section ----- */
  --color: ${props => (props.color ? props.color : '#ffab9d')};
  --size: ${props => (props.size ? props.size : '50px')};
  /* -------------------------------- */
  display: inline-block;
  font-family: Avenir, sans-serif;
  color: #111;
`;

const A = styled.a`
  text-decoration: none;
  color: inherit;
  transition: all 0.2s ease;
  position: relative;

  padding: calc(var(--size) / 8) calc(var(--size) / 3.5);
  display: flex;
  align-items: center;

  &::before {
    content: '';
    display: inline-block;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    border-radius: calc(var(--size) / 2);
    background: var(--color);
    opacity: 0.6;
    width: var(--size);
    height: var(--size);
    transition: all 0.3s ease;
  }

  &:hover::before {
    width: 100%;
    opacity: 1;
  }

  /* &:active {
    transform: scale(0.96);
  } */
`;

const Text = styled.span`
  white-space: nowrap;
  display: inline-block;
  position: relative;
  font-size: calc(var(--size) / 3.2);
  font-weight: 900;
  letter-spacing: calc(var(--size) / 12.5);
  text-transform: uppercase;
`;

const Arrow = styled.span`
  font-size: calc(var(--size) / 2);
  display: inline-block;
  margin-left: calc(var(--size) / 3.5);
  transform: translate(-5px, -10%);
  transition: transform 0.3s ease;

  ${A}:hover & {
    transform: translate(0, -10%);
  }
`;

const CircleSlideLink = props => {
  return (
    <Wrapper color={props.priColor} size={props.size}>
      <A href={props.href} target="_blank">
        <Text>{props.children}</Text>
        <Arrow role="img" aria-label="Arrow">
          ↠
        </Arrow>
      </A>
    </Wrapper>
  );
};

export default CircleSlideLink;

✂️

Usage

Example usage of component with optional props


<CircleSlideLink priColor="coral" size="45px" href="http://www.casyjs.com">
  click me
</CircleSlideLink>;